jQuery Month Calendar Plugin

Posted in Software by JarrettV on 2/4/2010 2:08:00 PM - CST

The jQuery Month Calendar Plugin is a free plugin to add a small and fast calendar navigation widget to your web page. I used the jQuery Calendar Widget Plugin as inspiration to create a light-weight calendar that is also interactive.

Features

Jump between months without needing to reload page
Events for changing date or each day can be a link
Supports templated day links
Change date can be canceled
Uses clean semantic markup
Degrades gracefully when javascript disabled
Very small at only 2KB

HTML

The following HTML is generated server side. I consider it the fallback code if the client does not have javascript enabled. I use ASP.Net MVC to generate it but you can use PHP, etc.

<div class="cal"> 
 
<a rel="prev" href="/jvance/2010/01/02">Prev</a> 
<a rel="next" href="/jvance/2010/03/02">Next</a> 
<h3 class="month">February 2010</h3> 
<table cellspacing="0"> 
<thead> 
  <tr><th class="weekend">Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th class="weekend">Sat</th></tr> 
</thead> 
<tbody> 
  <tr><td class="weekend out"><a href="#/jvance/2010/01/31">31</a></td><td><a href="#/jvance/2010/02/01">1</a></td><td class="current"><a href="#/jvance/2010/02/02">2</a></td><td><a href="#/jvance/2010/02/03">3</a></td><td class="today"><a href="#/jvance/2010/02/04">4</a></td><td><a href="#/jvance/2010/02/05">5</a></td><td class="weekend"><a href="#/jvance/2010/02/06">6</a></td></tr><tr><td class="weekend"><a href="#/jvance/2010/02/07">7</a></td><td><a href="#/jvance/2010/02/08">8</a></td><td><a href="#/jvance/2010/02/09">9</a></td><td><a href="#/jvance/2010/02/10">10</a></td><td><a href="#/jvance/2010/02/11">11</a></td><td><a href="#/jvance/2010/02/12">12</a></td><td class="weekend"><a href="#/jvance/2010/02/13">13</a></td></tr><tr><td class="weekend"><a href="#/jvance/2010/02/14">14</a></td><td><a href="#/jvance/2010/02/15">15</a></td><td><a href="#/jvance/2010/02/16">16</a></td><td><a href="#/jvance/2010/02/17">17</a></td><td><a href="#/jvance/2010/02/18">18</a></td><td><a href="#/jvance/2010/02/19">19</a></td><td class="weekend"><a href="#/jvance/2010/02/20">20</a></td></tr><tr><td class="weekend"><a href="#/jvance/2010/02/21">21</a></td><td><a href="#/jvance/2010/02/22">22</a></td><td><a href="#/jvance/2010/02/23">23</a></td><td><a href="#/jvance/2010/02/24">24</a></td><td><a href="#/jvance/2010/02/25">25</a></td><td><a href="#/jvance/2010/02/26">26</a></td><td class="weekend"><a href="#/jvance/2010/02/27">27</a></td></tr><tr><td class="weekend"><a href="#/jvance/2010/02/28">28</a></td><td class="out"><a href="#/jvance/2010/03/01">1</a></td><td class="out"><a href="#/jvance/2010/03/02">2</a></td><td class="out"><a href="#/jvance/2010/03/03">3</a></td><td class="out"><a href="#/jvance/2010/03/04">4</a></td><td class="out"><a href="#/jvance/2010/03/05">5</a></td><td class="weekend out"><a href="#/jvance/2010/03/06">6</a></td></tr><tr><td class="weekend out"><a href="#/jvance/2010/03/07">7</a></td><td class="out"><a href="#/jvance/2010/03/08">8</a></td><td class="out"><a href="#/jvance/2010/03/09">9</a></td><td class="out"><a href="#/jvance/2010/03/10">10</a></td><td class="out"><a href="#/jvance/2010/03/11">11</a></td><td class="out"><a href="#/jvance/2010/03/12">12</a></td><td class="weekend out"><a href="#/jvance/2010/03/13">13</a></td></tr> 
</tbody> 
</table> 
<a rel="today" href="#/jvance/2010/02/04"><small>go to</small> Today</a> 
</div>

CSS

The following CSS makes it look pretty. There are also some tricks going on with the icons to minimize the number of image files downloaded. It is called CSS sprites. I've tweaked it to look good in all the major browsers.

.cal {text-align:center; width:24em;-moz-border-radius:8px; -webkit-border-radius:8px;background:#fafafa;
                  border: solid 1px #ddd; margin:0; padding:0.8em}
.cal .month {color:#002a5f; font-weight:bold; margin:0.2em 0; padding:0.4em; font-size:1.5em; text-align:center }
.cal a[rel=prev], a[rel=next] { display:block; margin:0.3em 1em; overflow:hidden; width:32px; height:32px;text-indent:-999em;background: transparent url('img/icons.png') no-repeat scroll 0 0 }
.cal a {text-decoration:none}
.cal a[rel=next] {float:left;background-position: -32px -32px}
.cal a[rel=prev] {float:right;background-position: 0 -32px}
.cal a[rel=next]:hover {background-position: -32px 0}
.cal a[rel=prev]:hover {background-position: 0 0}
.cal table {background:#fbfbfb;width:100%;margin:0 0 0.5em 0;padding:0;border: solid thin #f2f2f2; border-collapse: separate !important}
.cal td, .cal th {width:14.3%;height:2.3em;border: solid thin #ddd; padding:0 }
.cal tbody td {text-align:center; vertical-align:middle;}
.cal tbody a {display:block;width:100%;line-height:280%}
.cal td.out {background:#f8f8f8; font-family:Arial Narrow } .cal td.out a { color:#aaa}
.cal .weekend {background:#f2f2f2}
.cal .weekend.out {background:#f0f0f0}
.cal td.current {font-weight:bold;padding:0;background: #8de !important} .cal td.current a{color:#002a5f;}
.cal td.hover, .cal td.weekend.out.hover {color:#224cff;background:#ff8;cursor:pointer}
.cal td.today {font-weight:bold; border:solid 1px red} .cal td.today a, .cal a[rel=today]{color:Red}

Javascript

The following javascript is used on the demo page to configure three different calendars. You can configure:

Custom javascript event when day is clicked
Custom start month and date
Custom date URL using a URL template

$().ready(function () {
  $("#cal-event").calendar({ dateChanged: function (date) { alert('You clicked a ' + date.toDateString()); return false; } });
  $("#cal-cust").calendar({ year: 2008, month: 3, current: new Date(2008, 3, 2) });
  $("#cal-url").calendar({ templateUrl: '/blog/year-month-day.php' });
});

Don't forget, you'll need to import jquery.js and the jquery.calendar-1.0.js scripts in your page.