En liten julklapp

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.

CSS:

#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;
}

Kalenderkoden:

#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