jMonthCalendar is a full month calendar that supports events. You simply initialize the calendar with options and an events array and it can handle the rest. The plugin does have extension points that allow the developer to interact with the calendar when the display is about to change months, after the display has changed months and when the event bubbles are clicked on. jMonthCalendar now supports hover extension points, hover over an event and trigger an event like an alert(); By default the events would each have a URL supplied that would link to a details page.

UPDATE: Please be sure to read my latest post to see some of the new changes and to find out why it is in beta.

NOW ACCEPTING DONATIONS! - jMonthCalendar needs some better documentation and and demos. This site, my blog, can not fully provide that, and nor can Google Code. I want to expand my demos to showing examples of AJAX solutions and provide more source code examples. However, hosting doesn't come cheap and if you are using this plugin (and like it) and feel generous I could very much appreciate the help. Any dollar amount is appreciated. *Note: * PayPal take a 3.4% commision on all donations. Please bare this in mind when donating.

Links Google Code Home (Source/Wiki) Downloads jQuery Project Home Page Documentation and Samples


Change Log

Uses & Code Examples

The simplest way to use the plugin use this html some place in your page:

And use this Javascript:

$().ready(function() {
    var options = { };
    var events = [ ];
    $.jMonthCalendar.Initialize(options, events);

If you want to get more advance an tie into some of the configurable options you can use this as your options variable. You can see how you can set the extension handles here to fire custom code at points. You can also see that the month names can be localized easily. Notice the new onEventBlockOver and onEventBlockOut; this would allow you to signal an alert or a type of balloon pop-up.

var options = {
    containerId: "#jMonthCalendar",
    headerHeight: 50,
    firstDayOfWeek: 0,
    calendarStartDate:new Date(),
    dragableEvents: true,
    activeDroppableClass: false,
    hoverDroppableClass: false,
    navLinks: {
    enableToday: true,
    enableNextYear: true,
    enablePrevYear: true,
    p:'‹ Prev',
    n:'Next ›',
    showMore: 'Show More'
    onMonthChanging: function(dateIn) { return true; },
    onMonthChanged: function(dateIn) { return true; },
    onEventLinkClick: function(event) { return true; },
    onEventBlockClick: function(event) { return true; },
    onEventBlockOver: function(event) { return true; },
    onEventBlockOut: function(event) { return true; },
    onDayLinkClick: function(date) { return true; },
    onDayCellClick: function(date) { return true; },
    onDayCellDblClick: function(dateIn) { return true; },
    onEventDropped: function(event, newDate) { return true; },
    onShowMoreClick: function(eventArray) { return true; },
    locale: {
    days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
    daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
    months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    weekMin: 'wk'

As for the events, this is how I have set them up to be handled, if you need something different you can modify the source of the plugin or easily map to these object/array. I plan on using this plugin in an MVC application and will just serialize my event object to JSON for this plugin.

var events = [
    { "EventID": 1, "StartDateTime": new Date(2009, 5, 12), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
    { "EventID": 2, "StartDateTime": "2009-05-28T00:00:00.0000000", "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" },

You are not limited to just loading the events the first time the calendar is initialized. You can do an AJAX call and retrieve more events from your server based on the date that the calendar is changing to. You can also add events to the calendar through an exposed method. Note: the method to use an AJAX call should be onMonthChanging. This event fires before the calendar and events are drawn

//Set a function to get more events, this could be an AJAX call to the server as well.
var options = {
    onMonthChanging: function(dateIn) {
        //this could be an Ajax call to the backend to get this months events
        var events = [
            { "EventID": 1, "StartDateTime": new Date(2009, 6, 1), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "", "CssClass": "Birthday" },
            { "EventID": 2, "StartDateTime": new Date(2009, 6, 2), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "", "CssClass": "Meeting" }
        return true;

//on a button click, add more the the calendar.
$("#Button").click(function() {
    //extraEvents could be a call to the server or anything else that can produce a JSON array

//you could also set/change the month from an external source
$("#ChangeMonth").click(function() {
    $.jMonthCalendar.ChangeMonth(new Date(2009, 5, 7));


Should you have any issues with the plugin you can either leave a comment here with the details of your browser (name and version), post an issue at the Google Code home page here (login to create an issues), or worst case email me at Please provide as much detail as you can, such as browser name/version, along with the version of jQuery your using. I will try to get to issues as quick as possible, but if you know or have the solution that will help even better. Thanks, Kyle.