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();
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);
});
Hello,
this plugin looks great. Where can I see it working?
Thanks for sharing
Hello, thanks. You can see my use of it here.
Hey, great work. This plugin rocks!!! Thanks.
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.
Great! This is an awesome script! Whats more – it is possible to integrate this tool with php + mysql. It works like a charm!
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);
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’ }
}
});
}
Kyle speaks
descuopa the first English
I wonder how you bring the information from your calendar
I don’t get it at all..
When you add event, where is it saving the data?
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.
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.
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.
Dear Kyle,
This canlendar saved a lot of hussle. Many thanks for damn good work!