jMonthCalendar Options, Events, & Methods Documentation

Posted on by

In this post I am going to cover all the custom event/options as well as methods that can be configured and used in jMonthCalendar. All of these are options that can be supplied at initialization in order to manipulate the calendar further or be able to tie into some additional logic ot rules. As well as methods that are exposed for manipulating the calendar after initialization. This is my first attempt at formal documentation, so bare with me.

Options

containerId – default: #jMonthCalendar

Use this to configure where your calendar should be placed in the page. You must have a matching DOM element with the ID

$.jMonthCalendar.Initialize({ containerId: '#MyContainerId' }, null);

headerHeight – default: 50

This sets the height of the navigation header.

$.jMonthCalendar.Initialize({ headerHeight: 50 }, null);

firstDayOfWeek – default: 0

This determines which day of the week weeks should start on (default 0 refers to sunday). Monday is 1, Tuesday is 2, etc.

$.jMonthCalendar.Initialize({ firstDayOfWeek: 1 }, null);

calendarStartDate – default: new Date()

This determines which month to display when the calendar is first loaded. The default is to start in the current month (today).

$.jMonthCalendar.Initialize({ calendarStartDate: new Date(2009, 1, 1) }, null);

dragableEvents – default: true

This determines weather or not you want event blocks to be dragable. Note this depends on jquery.ui.dragable.

$.jMonthCalendar.Initialize({ dragableEvents: false }, null);

dragHoverClass – default: ‘DateBoxOver’

This is the css class that is added when an element is being hovered over an acceptable date cell.

$.jMonthCalendar.Initialize({ dragHoverClass: 'SomeCssClass' }, null);

navLinks (object of values)

These are the label text and switches to determine the header navigation.

$.jMonthCalendar.Initialize({ 	
	navLinks: {
		enableToday: true,
		enableNextYear: true,
		enablePrevYear: true,
		p:'‹ Prev', 
		n:'Next ›', 
		t:'Today',
		showMore: 'Show More'
	}
}, null);

Events

onMonthChanging

This event is triggered upon changing the calendar’s month. If the callback function returns false, the change will be prevented. Note: this would be an excelent point to do an AJAX call for the next months events.

// supply this callback as an option with the collowing signature
$.jMonthCalendar.Initialize({
    onMonthChanging(newDate) { ... }
}, null);
 
// AJAX call sample for more events
$.jMonthCalendar.Initialize({
    onMonthChanging(newDate) { 
 
    }
}, null);

onMonthChanged

This event is triggered after calendar’s month has been changed.

$.jMonthCalendar.Initialize({
    onMonthChanged(event, newDate) { ... }
}, null);

onEventLinkClick

This event is triggered when the anchor tag of the event is clicked. Note: good place to link out to another page.

$.jMonthCalendar.Initialize({
    onEventLinkClick(event) { 
        alert(event.data.Event);
    }
}, null);

onEventBlockClick

This event is triggered when the div container of the event is clicked. Note: this our the link click would be a good place to show tooltips.

$.jMonthCalendar.Initialize({
    onEventBlockClick(event) { 
        alert(event.data.Event);
    }
}, null);

onEventBlockOver

This event is triggered when your mouse is over the event div container.

$.jMonthCalendar.Initialize({
    onEventBlockOver(event) { 
        alert(event.data.Event);
    }
}, null);

onEventBlockOut

This event is triggered when you mouse moves off the event div container.

$.jMonthCalendar.Initialize({
    onEventBlockOut(event) { 
        alert(event.data.Event);
    }
}, null);

onDayLinkClick

This event is triggered when the user clicks on the label of the day (number in upper right corner)

$.jMonthCalendar.Initialize({
    onDayLinkClick(event) { 
        alert(event.data.Date);
    }
}, null);

onDayCellClick

This event is triggered when the user clicks on the cell that contains the event div containers.

$.jMonthCalendar.Initialize({
    onDayCellClick(event) { 
        alert(event.data.Event);
    }
}, null);

onDayCellDblClick

This event is triggered wehn the user double clicks ont eh cell that contains the event div containers.

$.jMonthCalendar.Initialize({
    onDayCellDblClick(event) { 
        alert(event.data.Event);
    }
}, null);

onEventDropped

This event is fired after a user drags and drops and event onto a new day.

$.jMonthCalendar.Initialize({
    onEventDropped(event, calEvent, newDate) { 
        alert(calEvent);
        alert(newDate);
    }
}, null);

onShowMoreClick

This event is triggered when the user wishes to “see more” events than what can be displayed in the cell. Note: this would be a good place to use a tooltip or dialog as well.

$.jMonthCalendar.Initialize({
    onShowMoreClick(dayEvents) { 
        // dayEvents is an array of events 
        alert(dayEvents.length);
    }
}, null);

Methods

Initialize(options, eventArray)

This is the main method needed to be called to get a calendar on the page. You can initialize it with the options and event callbacks mentioned above to get a more custom plugin.

$.jMonthCalendar.Initialize({ containerId: '#MyContainerId' }, []);

ChangeMonth(newDate)

This method will change the current selected month of the calendar. This method will fire the callback onMonthChanging and onMonthChanged.

$.jMonthCalendar.ChangeMonth(new Date(2009, 1, 1));

ReplaceEventCollection(eventArray)

This will replace all events in the plugin with the new event array passed in. This will clear all existing events being displayed and redraw all the events after the replacement.

$.jMonthCalendar.ReplaceEventCollection([]);

AddEvents(eventArray)

This method will add a single event to the plugin or an array of events by merging into the existing array of events. After which the method will clear all visible event on the calendar and draw the events in the updated array.

$.jMonthCalendar.AddEvents([]);

ClearEventsOnCalendar()

This method will remove all the events in the plugin and and remove any being displayed.

$.jMonthCalendar.ClearEventsOnCalendar();

33 thoughts on “jMonthCalendar Options, Events, & Methods Documentation”

  1. Hi
    This is a great plugin and works wonderfully
    I am having a problem loading the Events when the page first loads
    (Which means I must click off the Current Month and then go back)

    My question is how would I load the page to display Events when it first loads
    I am using ASP.net MVC

    Please help

    • This is what I do, I call an Action when the page is ready (jquery) which returns the current date’s month of events:


      var currentDate = new Date();
      $.getJSON("/Events/List/" + currentDate.getFullYear() + "/" + (currentDate.getMonth() + 1), null, function(events) {
      var result = events.Events;
      //buffer the array to handle custom formating.
      $.jMonthCalendar.Initialize(options, events.Events);
      });

  4. jMonthCalendar 1.3.2beta
    jQuery 1.4.2

    I like your calendar and the various options and I’m trying to get the basics to work, but for some reason I’m hitting a wall.

    Navigation is not working at all. Even when I’m triggering a change of month using a button, the calendar is not changing. Looking into your example I noticed that you make use of jMonthCalendar 1.3.0beta.

    Can you check and confirm that 1.3.2beta is working correctly when it comes to changing months/years?

    Or should I just download one of the stable versions?

    Which version can be considered stable and fully functional?

    Thanks.

    • Yeah, I’m not a php/mysql expert though so hopefully somebody watching the comments will help you out.

    • Yes, it is possible. That is how I am using it. You just need to feed in the events in json format – I am passing in a PHP array to Zend_Json::encode($my_events_array), and then this next part is very important:

      //In your javascript utilize the
      var events = JSON.parse(your_js_variable)
      jQuery.jMonthCalendar.Initialize(options, events);

      • Hi Routy,
        I like this calendar and would like to use it in Zend Framework as well, events come from mysql db. As I am new in this area, can you describe more precisly how you did it please?

  6. Hey – Great Plugin! One question that I was hoping you could help me with. I am using the onShowMoreClick event and I am wanting to get the ID of the Show More link that I am clicking on so that I can attach a qTip tooltip to it. How do I do that??? I can’t seem to figure it out. Thanks!

    • Thanks for the support. I will probably do a blog post on this topic soon cause it is something that frequently gets asked. Basically I use the onEventBlockClick option and then create a solo qtip on that something like:

      Specific things to set/watch for is the show, hide and solo options in qtip.

      onEventBlockClick: function(event) {
      $(this).qtip({
      content: {
      url: ”,
      data: { ID: event.data.Event.EventID },
      title: {
      text: event.data.Event.Title,
      button: ‘Close’
      }
      },
      show: {
      ready: true,
      solo: true,
      when: { event: ‘click’ }
      },
      hide: {
      fixed: true,
      when: { event: ‘unfocus’ }
      }
      });
      }

    • By default the plugin is just saving the event to an internal array. It would be up to you to implement some type of AJAX saving/creation and then add it to the calendar.

  9. When you select the first day of week at monday (1) and the first day of month is a sunday the first day of month isn´t is draw.
    I solve this including this line in the initDates Method:

    _gridOffset = _firstOfMonth.getDay() – def.firstDayOfWeek;
    ——–>>>>>>>> if (_gridOffset < 0) { _gridOffset = 6; } <<<<<<<<<<<<<<<—————————–
    _totalDates = _gridOffset + _daysInMonth;

    • That is a damn good find, thank you very much. I will post a release soon, otherwise the source has been updated.

  10. Hi! Great Job!
    Is there a way to prevent load the header controls in fact (without css)? If yes, how I bind the “next, prev, today, years” commands using a external button?

  11. Hi,

    For some reason, my events show on the next month instead of this month. Any reason why this is?

    My events look like this:

    { “EventID”: 4, “StartDateTime”: “new Date(2010, 7, 20)”, “Title”: “Joehoeeee”, “URL”: “#”, “Description”: “Joehoeeee” },
    { “EventID”: 7, “StartDateTime”: “new Date(2010, 7, 10)”, “Title”: “Vergaderen”, “URL”: “#”, “Description”: “Vergaderen” }

    • JavaScript dates for specifying the month is a 0 based index so July (which you and I know as month 7) is actually month 6. Zero being January and so on. Using 7 in your example will put the events in August.

    • You could use the CssClass option for the event and then create a style with a background image

  14. How small can the calendar be? I am thinking to use either jMonthCalendar or FullCalendar on the corner of my page, can you show me how to make it as small as the jQuery date picker?

    I don’t want to use jQuery date picker since I need a calendar.

    Thanks in advance

  16. There seems to be a problem with the onDayCellClick event (and similar events) for getting the current date. I noticed even in the sample code, when I click on any day for the month of November 2010, it’s telling me the date is Saturday, December 4th. This is because Saturday December 4th is the last date the calendar renders for that month. Switching to any other month causes it to give me the last date for that particular month’s rendering.

    I need to be able to pass the actual date of the box I clicked on. It appears to be a problem in jMonthCalendar.js with currentDate being equal to the last date rendered and not the actual current date for that particular day box. Any thoughts on how to fix?

  17. Thanks a ton for the wonderful plugin.
    My question is how do I use xml to load events.
    I want to be able to use this
    $.ajax({
    type: ‘GET’,
    url: ‘calendarContent.xml’,
    dataType: ‘xml’,
    success: function(xml)
    {
    $(xml).find(‘event’).each(function(){
    var id =$(this).attr(‘id’);
    $(this).find(‘date’).each(function(){
    var year = $(this).find(‘year’).text();
    var month = $(this).find(‘month’).text();
    var day = $(this).find(‘day’).text();
    });

    var title = $(this).find(‘title’).text();
    var content = $(this).find(‘content’).text();
    var description = $(this).find(‘description’).text();

    });

    }
    But how do i insert the event each time into the array events?

  18. I am trying to get the “Show More” to populate the actual events that are assigned to that particular day…Righ now it only shows the number of events…Any suggestions on how to do this? Thanks in advance.

  19. Events not shown on the calender……. can someone but more info on howto add Events to the calender, and also how to display them with some options?

  20. Hi,

    I see from your code you can set different styles of day names, e.g. dayNames, abbreviatedDayNames, shortestDayNames.

    But I can’t see anywhere in your documentation that tells us how to choose which formate we want.

    Thanks.