jvance.com

.net, c#, asp.net, linq, htpc, woodworking

jQuery Month Calendar Plugin

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

Monthcal_thumb3.media 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.

View the Demo Page

Download jQuery Month Calendar Plugin

Comments

None.

Add Comment

Login using
Google Yahoo flickr AOL
and more
Or provide your details
Please enter your name. Please enter a valid email. Please enter a valid website.
Please supply a comment.
3.7 (3)
on 12/23/2011 2:15:47 PM - CST

Recent Entries

© Copyright 2017 Powered by AtomSite 1.3.0.0