(function($) { function firstOfMonth(d) { return new Date(d.getFullYear(), d.getMonth(), 1); } function sameDate(d1, d2) { return d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate(); } function renderCalendar(dateForMonth, selectedDate) { function dayOfWeekHeaders() { var dayLabels = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; output.push(''); for (var i = 0; i < 7; i++) { output.push(''); output.push(dayLabels[i]); output.push(''); } output.push(''); } function blankDaysBeforeFirst(dateForFirst) { for (var i = 0; i < dateForFirst.getDay(); i++) { output.push(''); } } function blankDaysAfterLast(dayOfWeek) { if (dayOfWeek != 6) { for (var i = dayOfWeek; i < 6; i++) { output.push(''); } output.push(''); } } function dayCell(date) { if (sameDate(date, selectedDate)) { output.push(''); output.push(d.getDate()); output.push(''); } else { output.push(''); output.push(d.getDate()); output.push(''); } } var output = []; output.push(''); dayOfWeekHeaders(); output.push(''); blankDaysBeforeFirst(dateForMonth); var currentMonth = dateForMonth.getMonth(); var d = firstOfMonth(dateForMonth); while (d.getMonth() == currentMonth) { var dayOfWeek = d.getDay(); if (dayOfWeek == 0 && d.getDate() != 1) { output.push(''); } dayCell(d); if (dayOfWeek == 6) { output.push(''); } d.setDate(d.getDate() + 1); } d.setDate(d.getDate() - 1); // Go back to last day of month... blankDaysAfterLast(d.getDay()); output.push('
'); return output.join(''); } $.fn.calendar = function() { return this.each(function() { var $cal = $(this); var selectedDate = new Date(); var displayedMonthDate = firstOfMonth(selectedDate); var renderHtml = function() { $cal.html(renderCalendar(displayedMonthDate, selectedDate)); $("a", $cal).click(function(ev) { var dayOfMonth = parseInt($(this).text()); selectedDate = new Date( displayedMonthDate.getFullYear(), displayedMonthDate.getMonth(), dayOfMonth ); renderHtml(); $cal.trigger('selectedDateChanged', [selectedDate]); }); }; $cal.bind('showPrevMonth', function() { var month = displayedMonthDate.getMonth() - 1; displayedMonthDate.setMonth(month); renderHtml(); $cal.trigger('monthChanged', [displayedMonthDate]); }); $cal.bind('showNextMonth', function() { var month = displayedMonthDate.getMonth() + 1; displayedMonthDate.setMonth(month); renderHtml(); $cal.trigger('monthChanged', [displayedMonthDate]); }); $cal.bind('setSelectedDate', function(ev, date) { selectedDate = date; renderHtml(); $cal.trigger('selectedDateChanged', [selectedDate]); }); renderHtml(); }); }; })(jQuery);