jQuery Month Calendar Plugin


updated 6 years ago

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

  • 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

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.


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}

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