Sample Widget Calendar
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
The calendar shown on the right hand side of this page uses the default settings and CSS stylesheet provided with the Availability calendar widget (except that I’ve changed the title from Availability to Villa Availability and switched on the Feed URI’s).
Month HTML Markup
The widget generates the following HTML for each month displayed (I have added some carriage returns in the code below so that it will fit on this page):
<div class='cs_availabilitycalendar_container december 2006 thisyear thismonth‘><table class=’cs_availabilitycalendar’>
<caption>December 2006</caption>
<thead><tr><th scope=’col’>M</th><th scope=’col’>T</th><th scope=’col’>W</th><th scope=’col’>T</th><th scope=’col’>F</th><th scope=’col’>S</th><th scope=’col’>S</th></tr></thead>
<tbody<tr><td> </td><td> </td>
<td> </td><td> </td><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td class=’booked’>16</td><td class=’booked’>17</td></tr>
<tr><td class=’booked’>18</td><td class=’booked’>19</td><td class=’booked’>20</td><td class=’booked’>21</td><td class=’booked’>22</td><td class=’booked’>23</td><td>24</td></tr>
<tr><td>25</td><td>26</td><td>27</td><td>28</td>
<td>29</td><td>30</td><td>31</td></tr>
</tbody>
</table></div>
Some sections to make a note of are in bold. The first bold section above is:
december 2006 thisyear thismonth
the HTML markup for each month has the month and year as CSS classes in the main DIV statement. This has been added in case you wish to have month and year based CSS styles.
Each month also has some descriptive CSS classes assigned. Months in the current year are marked with the class thisyear, those in following years are marked nextyear.
The current month is marked with the class thismonth.
The second section in bold above is:
<thead><tr><th scope=’col’>M</th><th scope=’col’>T</th><th scope=’col’>W</th><th scope=’col’>T</th><th scope=’col’>F</th><th scope=’col’>S</th><th scope=’col’>S</th></tr></thead>
This is the main header of the table that displays the Day of the week headers.
This section of code is pulled directly from the Week Header option in the Availability and Booking manager plugin.
When making changes to this option, you should be aware that it will also change the markup in the widget as well as the standard calendar.
This header was made common as it is the only part of the calendars that is both Language and start of week dependent, so it made sense (to us anyway) to store and allow it to be changed in only one place.
Month CSS styles
The default CSS style for the widget is shown below. I won’t make much comment on it as it is fairly self-explanatory for those who are likely to be making changes.
It is based largely on the CSS style for the Yahoo YUI calendar widget.
.cs_availabilitycalendar_container
{
float:left;
padding:5px;
background-color:#F7F9FB;
border:1px solid #7B9EBD;
margin-bottom:10px;
}
.cs_availabilitycalendar caption {
border:1px solid #E0E0E0;
vertical-align:middle;
background-color:#FFF;
position:relative;
width:100%;
text-align:center;
}
.cs_availabilitycalendar
{
font:100% sans-serif;
text-align:center;
border-spacing:0;
border-collapse:separate;
}
.cs_availabilitycalendar tbody td
{
padding:.1em .2em;
border:1px solid #E0E0E0;
background-color:#FFF;
}
.cs_availabilitycalendar tbody td.booked
{
background-color:#F66;
}
.cs_availabilitycalendar_feedcontainer
{
float:left;
padding-left:5px;
padding-right:15px;
}
.cs_availabilitycalendar_feedcontainer a.icalfeedlink
{
float:left;
}
.cs_availabilitycalendar_feedcontainer a.rssfeedlink
{
float:right;
}
Can I use this CSS style on my main Calendar as well?
Of, course you can. You will need to make the following changes to the HTML in your calendar options panel to add the required markup:
Month Block
<div class='cs_availabilitycalendar_container {lowertitle} {monthclass}'>
<table class='cs_availabilitycalendar'>{monthblock}</table>
</div>
{lowertitle} is a new markup tag added in version 0.4a to provide the lowercase month and year.
{monthclass} is a new markup tag added in version 0.4a to provide thismonth, thisyear functionality.
