För att hålla mina CSS-kunskaper fräscha, och för att komma ifrån Photoshop en eftermiddag, modifierade jag SiteVisions kalender. Här nedan kan ni se hur den ser ut och även kopiera koden för att få en sådan kalender till er sida.
Det ska understrykas att vissa funktioner har flyttats från modulens inställningar till CSS. Behärskar ni inte CSS så testa på en sida som inte är live eller fråga någon om hjälp.
#limepark_boxtop {
height:35px;
background-color:#f4f4f4;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
border:1px solid #d2d5d7;
text-align:center;
position:relative;
text-transform: uppercase;
font-size:18px;
padding-top:18px;
color:#5d5d5d;
}
#limepark_box {
border-left:1px solid #d2d5d7;
border-right:1px solid #d2d5d7;
border-bottom:1px solid #d2d5d7;
background-color:#ffffff;
padding:20px;
}
.limepark_rightbtn {
position: absolute;
right: 0px;
top:0px;
height:53px;
width:29px;
border:none;
background:url(http://app.limepark.se/kund/kalenderpil_h.gif) no-repeat top right;
}
.limepark_leftbtn {
position: absolute;
left: 0px;
top:0px;
height:53px;
width:29px;
border:none;
background:url(http://app.limepark.se/kund/kalenderpil_v.gif) no-repeat top left;
}
.limepark_caltxt {
text-align:center;
font-weight:bold;
}
.limepark_cell {
border:1px solid #e0e0e0;
text-align:center;
width:52px;
height:38px;
}
#set ($monthFont = $prefs.getFont('monthFont'))
#set ($weekDayFont = $prefs.getFont('weekDayFont'))
#set ($daysFont = $prefs.getFont('daysFont'))
#set ($eventDaysFont = $prefs.getFont('eventDaysFont'))
#set ($monthLinkFont = $prefs.getFont('monthLinkFont'))
#set ($borderColor = $prefs.getColor('borderColor'))
#set ($todayDateColor = $prefs.getColor('todayDateColor'))
#set ($eventDaysColor = $prefs.getColor('eventDaysColor'))
#set ($backgroundColor = $prefs.getColor('backgroundColor'))
#set ($cellWidth = $prefs.getInteger('cellWidth'))
#set ($showPrevMonth = $prefs.getBoolean('showPrevMonth'))
#set ($showWeekNumber = $prefs.getBoolean('showWeekNumber'))
#set ($showWeekend = $prefs.getBoolean('showWeekend'))
#set ($altText = $prefs.getValue('altText'))
#set ($wmURLs = $weekMonthURLs)
<div id="limepark_boxtop">
#if($showPrevMonth || !($month.equals($currentMonth) && $year == $currentYear))
<a class="limepark_leftbtn" href="$prevMonthURL"></a>
#end
$month $year
<a class="limepark_rightbtn" href="$nextMonthURL"></a>
</div>
<div id="limepark_box">
<table style="border-collapse:collapse" summary="$!altText">
<caption style="display:none;">$!altText</caption>
<tr>
#if($showWeekNumber)
#set ($dnum = 0)
#else
#set ($dnum = 1)
#end
#foreach ($dayName in $dayNames)
#if ($dnum == 0)
<td class="$weekDayFont limepark_caltxt">$!dayName</td>
#else
<th class="$weekDayFont limepark_caltxt" id="d$dnum">$!dayName</th>
#end
#set ($dnum = $dnum+1)
#end
</tr>
#set ($wNumHeader = 1)
#foreach($week in $weeks)
#set ($useWeekHeader = "")
<tr>
#if($showWeekNumber)
#set ($useWeekHeader = " v$wNumHeader")
<th id="v$wNumHeader">
#if ($week.get(0).get("week"))
#set ($firstWeekOfMonth = $week.get(0).get("week"))
#end
<a class="$weekDayFont" href="${wmURLs.get("v$firstWeekOfMonth")}" title="">v$firstWeekOfMonth</a>
</th>
#end
#set ($dnum = 1)
#foreach($day in $week)
#if($day.containsKey("isToday") && $todayDateColor)
#set ($bgColor = "background-color:" +$todayDateColor)
#elseif($day.containsKey("hasEvent") && $eventDaysColor)
#set ($bgColor = "background-color:" +$eventDaysColor)
#elseif($backgroundColor)
#set ($bgColor = "background-color:" +$backgroundColor)
#else
#set ($bgColor = "")
#end
#if($day.containsKey("hasEvent"))
<td class="limepark_cell" style="$!bgColor" headers="d$dnum$useWeekHeader"><a class="$eventDaysFont" href="${day.get("hasEvent")}" title="$day.get('date') $month">$!{day.get("date")}</a></td>
#else
<td class="limepark_cell" style="$!bgColor" headers="d$dnum$useWeekHeader"><span class="$daysFont">#if(!$day.get("date")) #else $!{day.get("date")} #end</span></td>
#end
#set ($dnum = $dnum+1)
#end
</tr>
#set ($wNumHeader = $wNumHeader+1)
#end
</table>
</div>
Hoppas ni får glädje av denna kalender och ha en trevlig jul.
Limepark AB
Gjuterigatan 9
553 18 Jönköping
Vägbeskrivning
Limepark AB
Gotlandsgatan 46
116 65 Stockholm
Vägbeskrivning
Limepark AB
Folketshusvägen 10
860 35 Söråker
Vägbeskrivning
Limepark AB
Kansligatan 1
703 61 Örebro
Vägbeskrivning
Limepark AB
Magasinsallén 2
891 31 Örnsköldsvik
Vägbeskrivning