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.
Ah ha! That makes a lot more sense and it sort of worked. The only reason I started by using onMonthChanging was because of this line in your tutorial above…
“Note: the method to use an AJAX call should be onMonthChanging. This event fires before the calendar and events are drawn” – Did i misunderstand this?
Also when trying to use ReplaceEventCollection in onMonthChanged I am running into a similar timing issue as before. When I switch to a different month it doesn’t seem to clear the events for some reason although the AddEvents seems to work correctly. What I have had to do is put the ReplaceEventCollection into onMonthChanging and the AddEvents code into onMonthChanged for it to work.
What I don’t understand is, why doesn’t the ClearEventsOnCalendar function in AddEvents not clear it already on its own? Thanks again for the help, ill be sure to send you a little write up of everything I’ve worked out once I get this all working. Thanks!
Ok I think I have figured some stuff out, hopefully this helps other people attempting to do AJAX solutions
Basically the workflow I am using now is this.
1. The internal jMonthCalendar ChangeMonth function is called. I have added a ReplaceEventCollection(new Array()) call in there before the DrawCalendar function is called so that we get a fresh calendar every time there is a change in date.
2. Next the onMonthChanged function is called where I do my AJAX call and then add the events to the now empty event list and empty calendar. As you showed above this works very well.
3. What I am going to be implementing next is call back function from the jSON jquery call so that I can do post processing on the events that are loaded. I believe this is the correct solution to my timing problems rather than having a spin-lock or wait timer.
Hope this helps!
Have you implemented this? Is this now the best way to do things? I assume in the month changing event you only return data for that month? How do you get the month its changing to?
Im actually using the QTIP with the following code it is working great.
$(“td.date_has_event”).qtip({
show: { solo: true, delay: 100, when: { event: ‘click’ }, effect: { type: ‘none’} },
content: $(this).attr(‘tipcontent’),
position: { corner: { target: ‘topMiddle’, tooltip: ‘bottomMiddle’} },
style: {
border: { width: 3, radius: 8, color: ‘#F78620′ },
tip: { corner: ‘bottomMiddle’ },
width: 230
},
hide: { when: { event: ‘unfocus’} }
});
The Problem that I have is that I would like to hide the title description, it keeps appearing if I do not click, just hover over the date cell.
How can I over ride the default browsers tool tip? I would like to just disable the browsers built in and still use the title attribute?
On second thought…
What I would like to do is call this not from the title but from a tooltip attribute.
I think that would solve my problems.
Any Suggestions?
this actually worked very well, if you facing the same problem use the following attribute with qtip
content: {prerender: true },
I need to tweak the calendar so I can easily remove and edit the events that I’ve added but I’ve been having a hard time finding such functions in the class. I’ve tried “$.jMonthCalendar.ClearEventsOnCalendar();” in the .html file to clear the stuff from the calendar but it doesn’t seem to work, I get a “Type mismatch (usually non-object value supplied where object required)” error.
I’m using version 1.2.0
Thanks in advance.
ClearEventsonCalendar() is a private function and can not be used from the html. It is just a helper method. Without modifying the source code you could easily just call AddEvents with an empty array I would think. Otherwise you can modify the source code and add this function definition to make ClearEventsOnCalendar() public:
jQuery.J.ClearEventsOnCalendar = function() {
ClearEventsOnCalendar();
}
The public API for jMonthCalendar is something that needs some more work. This will be a good addition. Thanks, Kyle
I’m not sure if anyone will read this or not, but I would just like to tell everyone that I am super excited about the next release. It is nearly a re-write of how the events and calendar is drawn. PLUS… The addition and working ability to support multi-day events that span days, weeks, month, probably years, etc. It is going to be cool and I look forward to the release.
I also am looking to establish a new website dedicated solely for jMonthCalendar in order to provide a forum, documentation, and solid demos to get new people started and excited. If anyone is interested in helping out with documenting or moderating or participating in a forum/community please drop me a line here in the comments or by email at k.leneau@gmail.com.
Looking forward to filling all the calendar needs,
Kyle
That’s great news. You’ve done an awesome job with this plug-in. Thanks.
How we can add a tooltips on an event ??
Hello,
Thank you for the great event calendar. I have not upgraded to the multi-event-per-day release but I confess I lost quite a few hours debugging an IE situation which I found worth mentioning.
Internet Explorer stubornly refused to go through the ‘success’ ajax callback function declared in onMonthChanging().
Apparently, the ‘dateIn’ parameter syntax is browser-dependent. It places the YEAR value LAST in IE, while Firefox renders it as a FOURTH string bit (“Tue May 26 19:26:03.0000 2009″ vs “Tue May 26 2009 19:26:03.0000″).
I resorted to a httpwatch IE7+ add-on to actually figure this out.
I also certified that no cache issue was involved regarding ajax queries, as generaly reported with IE.
Did anybody notice that calendar displays dates in incorrect month
If you look at example: http://www.bytecyclist.com/SourceCode/jMonthCalendar/1.2.0/Index.html
and view sourse code the first event set to “EventID”: 1, “Date”: “new Date(2009, 1, 1)”, “Title”: “10:00 pm – EventTitle1″, “URL”: “#”, “Description”: “This is a sample event description”, “CssClass”: “Birthday” },
January 1 2009 but it displays in February 01 2009
That is correct, JavaScript date constructors use 0 based index of months. So what we think as January = 1 JavaScripts sees as index 1 which is February. In order to get January you need to use 0.
@Kyle – awesome plugin – thank you so much!
@Ricardo – yes, I feel your pain!
@forum/Kyle… Several questions for my vacation calendar – I’m new to jQuery and never used UI so please bear with me…
1) Limit droppable area
Is there a way to make weekends not ui-droppable? I tried using an “if(weekday==0 || …” block to prevent the “dateBox.droppable” section from firing. It kind of works – the onEventDropped event doesn’t fire but a user is allowed to position an event to make it “look” like it dropped.
I see that you can’t drag an item outside of a ‘Datebox’ – how can i narrow that to only weekdays? Or, can it just cancel the drag action – I tried revert:’invalid’ but it didn’t work.
2) If the above is doable, how would you extend it to prohibit dropping on a holiday? Would prefer to store holidays in a database rather than a hard-coded array…
3) For the next release – any way to get these limitation options for multi-day events?
Thanks in advance,
A. Soong
I’m not sure yet hoe to answer your first two points, I will look into this. Multi-days events are completed I just need to do a writeup and build for release mode. I’m hoping to get to it this weekend.
@Kyle,
I spent some more time going through your code and did a “RTFM” on JQuery UI. I see how you’re using “containment” to limit the draggable area and I don’t think it’ll be easy to do what I’m asking. I’ve worked around this by doing some error checking/handling so I’m OK for now.
I’ll continue to experiment and see if I can incorporate non-droppable holidays into the mix. But if you come up with something…
As for #3, I think I can handle this through my stored proc call. Haven’t gotten that far yet but I think I’ll be OK.
BTW, I’m sure you’ve already made your next release bullet-proof but I did stumble upon a couple of things with 1.2.2 that didn’t make sense to me so I tried to “fix” them. I changed your code and posted what I did on your Google code issues list (#’s 9 & 10). Your thoughts on whether they were defects or if I should undo my changes because the behavior I was experiencing was intended?
Anyway, enough of my rambling – great calendar and I’m looking forward to your posts.
Thank you,
A. Soong
Pingback: jQuery Full Month Calendar Plugin Supports Events | Apni Library
Pingback: jQuery Event Calendar Plugin: jMonthCalendar :: Graficznie
Pingback: ByteCyclist » jMonthCalendar - A site made of bytes by a cyclist. | Squico
Great work with this jcal, one question…
How does this work:
“Show More Events” setting/hoot that passes the days worth of event object as an array?
I assume this is something that prevents the day cell from growing if there are 100 events for one day?
Pingback: jQuery Source | jQuery for dynamic » jMonthCalendar
How do you turn off the link for each day of the month? I don’t want the days to be clickable. We have event links listed for each day and the events are clickable for viewing the event details. Thank you.
Pingback: jMonthCalendar : plugin JQuery per creare un calendario con eventi | Pecciola
Pingback: jQuery Full Month Calendar Plugin Supports Events | Opensource-Open Source Book - Free Template-PHP Open Source - 开源大全-模板-PHP开源大全
Ack! The 1.3.0 beta has removed many of the things I liked most about this calendar. I understand that it’s just a beta, but it would be great if you implemented the following:
It would be great if “Show More” was an option instead of the only way to show events. If there are 200 events, I need to see them all at once with the day stretched out to fit (not my choice).
Also, wrapping of text for long event titles doesn’t work so well.
Finally, when you create the href for the event title, a title=”‘+event.Description+’” would be perfect for displaying details as a tooltip.
Pingback: Τα καλύτερα links - Ιούνιος 09 | Tsevdos.com