jMonthCalendar
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
Features
- jQuery 1.3.2 Compatible
- Ability to Load events
Change Log
- Release 1.3.2-beta
- Better event callback support
- Various bug fixes related to callback
- 6/17/2009 Release 1.3.0-beta
- Events that span multiple days with continuation over days, weeks, months, years.
- jQuery 1.3.2 Support
- Events are now pre-sorted for multi day events on top.
- “Show More Events” setting/hoot that passes the days worth of event object as an array.
- Start of jQuery UI theme support, arrows for spanning events.
- Removed initialize for static height and width, now all set on the main calendar using CSS (everything else is dynamic).
- Note: you must specify an EventID in the event objects, they are required now.
- Release 1.2.2
- Drag and Drop Events
- Dragable Events support using jQuery UI (Optional usage).
- Add ability to enable or disable calendar links (today link, next year, and previous year).
- Default Next and Previous link text changed.
- Added onDayCellDblClick event that passes the date you are double clicking.
- Added onEventDropped event that passes the event object and the new date being dropped into.
- Removed my custom Date extensions and replaced it with Datejs, more on this below.
- Complete Build Process to build, pack and minify the source.
- 3/24/2009 Release 1.2.1
- New Project Home: http://code.google.com/p/jmonthcalendar/
- Bug fixes for UTC Date Parsing
- Stop Event Propogation
- ANT Build Process
- Fix Day Cell click and Day click
- 2/12/2009 Release 1.2.0
- New extension points for working with the day cells or links
- Changed navigation header layout
- Added year navigation, works the same as month navigation
- Added a today link to return to today’s date
- Date formatting the parsing JSON improvements
- Updated sample for AJAX call, should happen onMonthChanging
- 2/12/2009 Minor Release 1.1.1
- Events are drawn immediately after month is drawn.
- Fixed configurable height and width in options
- Fixed configurable height of headers in options
- JSON Date formatting/parsing (ISO, new Date literal, UTC)
- EndDate property added to event object
- Date is now deprecated, replace by StartDate
- Event in calendar has new ID of ‘Event_’ + EventID, allow styling of specific events
- 1/29/2009 Minor Release 1.1.0
- Event onHover Extension Point added.
- Extend event object to include description and escape JSON.
- Extend the event object to accept “class” css class.
- Minor bug fixes to placement of events.
- 1/20/2009 Patch Release 1.0.1
- Event loading (isArray is not a function)
- Month Name not displayed in IE
- Configurable first day of week (0 for Sunday, 1 for Monday, etc)
- 1/18/2009 Initial Release
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 ›', t:'Today', 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" } ]; $.jMonthCalendar.ReplaceEventCollection(events); 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 $.jMonthCalendar.AddEvents(extraEvents); }); //you could also set/change the month from an external source $("#ChangeMonth").click(function() { $.jMonthCalendar.ChangeMonth(new Date(2009, 5, 7)); });
Demo
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 kyle.leneau@gmail.com. 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.
Can someone post a ASP.Net MVC example. I can’t seem to get data to appear in the onMonthChanging event. I am using JSON to return event information and it is working (i’ve checked via FireBug) but nothing appears in the calendar.
Hi Jon, I am using it on a project now and I have this as my Action: (I wrote a JsonNetResult that wraps Json.Net for easier return). Calendar month just has a few properties on the month, but other wise it has a List of CalendarEvent that the service returns with the selected year/month.
This is the JS onMonthChanging event hook code I use as well:
I hope that helps, let me know if you need more help. Oh yeah on load of the page I do the same getJSON for the current month’s events and initialize the calendar.
Thanks although I won’t be able to use the wrapper approach. I am doing a ASP.Net MVC JSONResult instead of a ActionResult on my Action and no luck
Would you provide me some code, I can take a deeper look. Also is your action firing? If so do the results look alright, I had a issue with how my class properties were named and what jMonthCalendar was going to look for ID, versus EventID, etc.
I think I have it working and have tried posting my code but it doesn’t appear in the comments for some reason
Hi,
I currently have a calendar on one of my web sites — http://www.nnjsda.org/new_calendar.php — that’s based on the YUI calendar. I’m in the process of switching the site to use jQuery instead of YUI, but the calendar was a stumbling point until found your plugin. Thanks. Is there any “real” documentation for the plugin? Will the day boxes expand if there are many events in one day?
I’ve just started to look at your plugin, so any helpful hints would be appreciated.
Ken
Hi Ken,
I’m glad you like the plugin so far. Documentation is something I am seriously lacking. I am working on a new site for the plugin that will include some samples, docs and a forum. The boxes will currently not expand if more events are added, there is a show more event that you can tie into though in order to show those hidden events in like a tooltip or dialog. I can provide you a sample if you still need something.
Thanks,
Kyle
Issues on onDayLinkClick / onDayCellClick:
Click on a day or day cell, it alerts date.toLocaleDateString()
#1: shows always same day wherever clicked. Do you know why?
#2: shows incorrect month name, cause js date month array begin in 0 (0=jan). So when click in a august month, it alerts september.
I am preety sure I can alert correct data using a custom code:
correctMonth = parseInt(date.getMonth()) + 1;
alert(correctMonth +'/'+ date.getDay() +'/'+ date.getFullYear() )
besides, it works great.
thx
I had found this issue as well a few days ago, I have made the fix in the source but events are now handled a bit differently. I will be pushing out a new release to address this issue tomorrow. I will also be writing up a detailed blog on how to handle the various events and how to get the passed data out.
Does anyone have a problem with events between March 15 and March 31st? None of my evens show for those dates. If I change the event date to any other date, they will show up correctly but nor for the March dates.
Thanks,
I changed line 360 & 361 to the following:
var one_day=1000*60*60*24
var startI = Math.ceil((tempStartDT – _dateRange.startDate) / one_day)
var endI = Math.ceil((tempEndDT – _dateRange.startDate)/ one_day)
Not sure if its the best way to fix this!
I found a bug in version 1.3.2
Line 529
if (!returned) {
should be
if (returned) {
This bug prevents the month and year links from changing the calendar display.
I am sure it has been brought up before but sometimes events that span multiple days will overlap each other instead of being drawn below. Here is the case I have:
Event 1 – 8/18/09 – 8/25/09
Event 2 – 8/27/09 – 9/7/09
Event 3 – 8/24/09 – 8/28/09
My suggestion is to NOT return true from that method, instead only return false when you want to stop the event.
Has anyone else a problem with events?
If i got that event:
var events = [ { "EventID": 1, "StartDateTime": "new Date(2009, 5, 29)", "EndDateTime": "new Date(2009, 6, 3)", "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description" } ];
The Event is correct, but if i change the date to 2009.6.29 – 2009.7.3 the blue marker is in august oO
Can I add two months in a same page?
Example I want to see events in this month and in next month in a same page.
Is it possible
The locale option doesn’t work in 1.3.2, and the website “jumps” to top when you click on prev or next month.
Anyone have a solution for this?
Great plugin!
This is indeed a great plugin! Congrats!
One problem though: Can’t get locale option to work (1.3.2b)… anybody?…
Ahh alas- There is yet no Google Translate for Techno speak yet. I must whither away from this site to seek a simple “Copy & paste this in a html box”solution elsewhere
hi!
i have download the version 1.3.2 beta (is the version to use or is better the stable? witch is the different between the features?) and try in my localhost.
now, i set up the function to change month and it’s working correct. but the calendar doesn’t print the event! even with the normal demo.html page, it print the calendar but not the event tha it in the code as default!
any idea of the reason?
thanks!
Is it possible to display an image in an event?
Not in the body of the event cause it is so small, best to think about tooltips. Might be able to incorporate icons using css and EventType.
hello!
i can’t understand why, even with your demo page, the calendar doesn’t change the month! i have always the current month, even when i click on prev or next button!
can you help me?
I would like to change the starting of the day to Saturday.
Great Plug in.
Thanks
You can do this by setting the option: firstDayOfWeek = 6
Hey there nice post and nice blog you have here!
Thanks!
Hi,
could you please show me how to this calendar retrieves data from MySQL using PHP?
thanks a lot
Novianto
Hi, i noticed that the calendar will only show my events when I change the month on the calendar. is there a way to show my events when i first initialize the calendar instead of changing months?
Yep, I do this on a site I am building. I perform an Ajax get to the server for the current month’s events when the page loads:
$().ready(function() {
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);
});
});
I have done this and I get the data on the current month but when I click Previous link the page shows the calendar without any data then after half a second it flashes and shows the data. Any ideas?
I am using this example – http://towardsnext.wordpress.com/2009/04/30/event-calendar-in-mvc-application-using-jmonthcalendarjquery/
Thank you all very, very much! ,
Hi there,
does anybody of you realized that october 17 is on saturday (correct) and sunday (incorrect).
I can’t figure it out, inspected the code at DrawCalendar function where
var currentDate = _dateRange.startDate.clone().addDays(i);
and it duplicates day 17…
any ideas?
thank you.
I havent´t used this calendar nor have seen the code, but I think the issue related to the October 17th day is probably caused by the Daylight Saving Time features built into the OS. This problem will probably be repeatable in some computers and in others not depending on their configuration related to this functionality and the Time Zone.
I read a few topics. I respect your work and added blog to favorites
I had a problem. When I was clicking on the “today”-Button, most of the events disappeared. I could solve it with the following lines near row 240:
if(defaults.navLinks.enableToday) {
//Create Today link for later
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()
todayLink = jQuery(‘‘+ defaults.navLinks.t +’‘).click(function() {
jQuery.J.ChangeMonth(new Date(year, month, 1, 0, 0, 0));
return false;
});
}
Feel free to email me your code if you need to. My email is k.leneau@gmail.com
Thanks! Have emailed you my code.