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

   
</table>
</div>

Hoppas ni får glädje av denna kalender och ha en trevlig jul.

Jönköping

Jönköping

Limepark AB

Gjuterigatan 9
553 18 Jönköping
Vägbeskrivning

Stockholm

Stockholm

Limepark AB

Gotlandsgatan 46
116 65 Stockholm
Vägbeskrivning

Timrå

Timrå

Limepark AB

Folketshusvägen 10
860 35 Söråker
Vägbeskrivning

Örebro

Örebro

Limepark AB

Kansligatan 1
703 61 Örebro
Vägbeskrivning

Örnsköldsvik

Örnsköldsvik

Limepark AB

Magasinsallén 2
891 31 Örnsköldsvik
Vägbeskrivning

*

I supporten:
Evylyn
AAA - Högsta kreditvärdighet