A dead simple, lightweight javascript calendar

I recently needed a good light weight javascript calendar but couldn’t find it. The problem is that online I could find many calendars, but they all suffered from one of two problems: they were either too heavy, or they were badly written (aka coding like it’s 1999).

I hereby present a very lightweight javascript calendar object. It can be used anywhere where you need to select a date.

It features the following:

• no library. That’s right, it does NOT use mootools, it does NOT use jQuery.
• clean code. Yes it can be improved, but that would make it a heavy calendar again.
• it does not do Date magic. If you want date magic I can recommend date.js. (oh, and that means things like ‘3 days ago’ etc.)
• it’s lightweight, mainly because it doesn’t do magic and it doesn’t have a library. It’s 2K uncompressed, 1.5K using dean edwards packer.
• no popup windows. All

Download

Download mbcalendar 1.0

Usage

var cal = new MBCalendar('inp', 'btn', 'click');

Where

• inp is the id of the input that will be retrieving the calendar, and
• btn is the id of the element that will trigger the calendar to show, and
• click is the name of the event that will trigger the calendar
• in the onload script, in this example ‘out’ is the id of the element that will hold the calendar.

This way it can be used as a date picker, but it can also be used as a visible calendar with navigation (static). Basically the output is simply the HTML, so you can use it anywhere.

All dates van be individually styled, since they all get a unique id. Also all dates get class names so you can style either a certain year, month, or day of the month. E.g. ‘.y2009′ will style every date in 2009, ‘.m3′ will style every march, and ‘.y2009.m3′ will style every day in March, 2009.

Source code

Now for the code

/*(c) Michiel van der Blonk 2009 - license: http://www.opensource.org/licenses/mit-license.php*/

function MBCalendar(m, y)
{
this.m = m;
this.y = y;
this.weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
}

MBCalendar.prototype.$ =  function(s) {return document.getElementById(s)};

// export as array
MBCalendar.prototype.toArray = function() {
var d;
var dates = [];
for (var i=1;i<32;i++)
{
d = new Date(this.y,this.m-1, i);
if (d.getMonth() == this.m-1)
dates.push(d);
}
return dates;
};

// export as html
MBCalendar.prototype.toHTML = function() {
var i;
var ret, dayId, dayClass;
ret = dayId = dayClass = '';
var dates = this.toArray();
ret += '
<table class="cal">' + '
<tr>';
for (i in [0,1,2,3,4,5,6])
ret += '
<th>' + this.weekDays[parseInt(dates[i].getDay())].substr(0,1) + '</th>
';
ret += '</tr>
<tr>';
for (i in dates)
{
var d = dates[i];
if ((parseInt(i) % 7) == 0)
ret += '</tr>
';
if ((parseInt(i)+1 % 7==0) && i<dates .length)
ret += '
<tr>';
dayClass = 'y'+d.getFullYear() + ' m' +(d.getMonth()+1) + ' d' + d.getDate();
dayId = 'day-' + parseInt(d.getTime()/86400000);
ret += '
<td id="' + dayId + '" class="' + dayClass +'">' + dates[i].getDate() + '</td>
';
}
ret = ret + '</dates></table>
';
return ret;
};

window.onload = function() {
var $ = function(s) {return document.getElementById(s)};
var c;
$('showCal').onclick = function() {
var y = $('year').value;
var m = $('month').value;
c = new MBCalendar(m, y);
$('out').innerHTML = c.toHTML();
};
$('prev').onclick = function() {
var d = new Date(c.y,c.m-2,1);
c = new MBCalendar(d.getMonth()+1, d.getFullYear());
$('out').innerHTML = c.toHTML();
}
$('next').onclick = function() {
var d = new Date(c.y,c.m,1);
c = new MBCalendar(d.getMonth()+1, d.getFullYear());
$('out').innerHTML = c.toHTML();
}
};

If you like you can integrate the prev, next and show methods in the Calendar object itself of course. I invite all javascript experts to crunch the code even more, without making it unreadable!

If you don’t integrate that code, you will need to add some standard HTML in a page to get a functional Calendar demonstration:

<input type="text" id="year" value="" />
<input type="text" id="month" value="" />
<button type="button" id="showCal">Show Calendar</button>
<button type="button" id="prev">prev</button>
<button type="button" id="next">next</button>

Some alternative calendars you might like:

• Aeron’s Mootools calendar. Check the 1.2 modified version.
• The Vista Like Ajax calendar (vla). The only problem I have with this one is it doesn’t work properly in IE8

update: there was still some debug code in there, it’s removed now. Also it seems wordpress messes up the code when I paste it. Change line 16 to have the ‘<’ char instead of &lt;