I have released a new version of jMonthCalendar (1.3.2-beta). Below I will provide a sample of the use of event callback as options. Well this release is pretty straight forward for the most part. It includes changes to how the custom events are fired mostly and addresses various bug fixes. As well as includes some reduction in file size. UPDATE Beta2 is released to fix some minor bug issues.
Download location: jMonthCalendar-1.3.2-Beta
The biggest change in this release is how events are handled. Before I was not passing the DOM event back to you for control, I was simply just calling the methods you configured as options and passing parameters. Now, the original DOM event is bubbled up to the custom event in most cases. Along with the original DOM event I am also stuffing in the custom data for the callback into the jQuery event object.
jQuery provides a nice way of encapsulating the original DOM event into a jQuery event object. A property on that object is ‘data’ (which can be waht ever I want). So now, all custom events are mostly passed one single parameter (with the exception of onMonthChanging and onShowMoreClick); the jquery typed event. Inside that event object I have put the data I want to send back, like the date or event object clicked on. Don’t worry I will get to a sample of what I am talking about.
First I will start off by showing you the old way of doing it prior to this release.
OLD Way
$().ready(function() { var options = { onMonthChanging: function(dateIn) { // this could be an Ajax call to the backend to get this months events alert("on month changing"); // $.jMonthCalendar.ReplaceEventCollection(events); }, onEventLinkClick: function(calEvent) { // calEvent will be the calendar event you clicked on alert("event link click"); return true; }, onDayLinkClick: function(dateIn) { // date might be wrong here, held reference from last item alert(dateIn.toLocaleDateString()); } }; $.jMonthCalendar.Initialize(options, []); });
Okay, so the obvious problem with that is that there is no way to get to the original DOM event.
NEW recommended Way
$().ready(function() { var options = { onMonthChanging: function(dateIn) { // this could be an Ajax call to the backend to get this months events alert("on month changing"); // $.jMonthCalendar.ReplaceEventCollection(events); }, onEventLinkClick: function(event) { // event is the jQuery event passed alert("event link click"); // can get to the actual calendar event now through the Data property alert(event.data.Event); // want to prevent event bubbling use: event.stopPropagation(); }, onDayLinkClick: function(event) { alert(event.data.Date.toLocaleDateString()); } }; $.jMonthCalendar.Initialize(options, []); });
How do I switch to the mini version of the calendar using the short forms of the dates like Mon, Tue
hey,
this is what I think i need for an ongoing project. I have a question though, can I use php and sqlite as the source for the arrays of the calender? just wondering since it did not say so here.
Thanks and God bless
joe
Of course, you can use anything you would like for a backing storage, as long as you can turn it into JSON I do not see a problem.
Just wanted to thank you for all the effort you have put into this plugin — it has worked quite well for me, although I was hoping you could provide some suggestions for my issue.
I should point out that I use this for an IE6 or IE7 based application.
I’m loading a large number of events, sometimes thousands (latest count was 5186), into a calendar, and I find that this poses a critical problem to the calendar, as it either hangs or times out with the “script timeout” error.
Some changes I’ve performed to the code are:
1. tips from this website: http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly. It allowed me to load up to a thousand events in a minute or so.
2. upgrade to Jquery 1.4. This significantly improved the “remove()” time.
3. used setTimeout to load data in batches (I used 50 or 100 in a batch). This allowed the system to load up to 1200 or so events without “script timeout” messages. I called it the lazyLoader.
However, beyond 1000 or so events, the calendar is, for all intents and purposes, not usable — the script timeout message comes up every minute or so, and eventually I get tired of waiting (and i waited for at least 15 minutes).
In an end-user situation, I can’t tell them to wait that long for a calendar to load.
I would love to hear your suggestions on ways to make this usable.
Have you tried loading the comments as the user pages the months instead of all of them at once? This would significantly reduce the overhead and solve the issue. Not sure why you would even want to load all the events at once.
Alright, I’ve been looking at code for too many hours today… what else do I need to do to this string to have it properly formatted for JSON…
[{"EVENTID":12,"STARTDATETIME":"2010-05-22","TITLE":"All Stars"},{"EVENTID":11,"STARTDATETIME":"2010-05-08","TITLE":"End of Season"},{"EVENTID":10,"STARTDATETIME":"2010-03-06","TITLE":"Opening Day"}]
Check spelling and case: [{"EventID":12,"StartDateTime":"2010-05-22","Title":"All Stars"},{"EventID":11,"StartDateTime":"2010-05-08","Title":"End of Season"},{"EventID":10,"StartDateTime":"2010-03-06","Title":"Opening Day"}]…?
Im having a problem with events overlapping each other.
if an event ends midweek and other events below it continue on through the week, the script doesnt seem to account for the space left above by the midweek ending date span
heres a screen shot of what im talking about.
http://cl.ly/3LX
I don’t have a lot of events so I loaded them all at once. However I found that clicking on the “Today” link clears out the events. Seems like it has to do with changing the date to a date object which includes the time [via new Date()], so it’s slightly different than the original plain mm/dd/yyyy date object. Anyhow, I just updated it to change to the mm/dd/yyyy day without the time with some quick and sloppy code.
todayLink = $(‘‘+ def.navLinks.t +’‘).click(function() {
var tempdate = new Date();
$.J.ChangeMonth(new Date(tempdate.getFullYear(), tempdate.getMonth(), tempdate.getDate()));
return false;
});
Thanks for the great plugin!
This calendar works great. It’s a perfect fit into my system. I’m having a problem with events not showing up on the bottom half of the month in March 2011. I can take the same exact code and just change it from the 13th to the 14th and it will no longer display. I have been able to get the event to show up if the end date is the next day. The event on March 13th displays ok but none of the rest will display.
{ EventID: 350934,StartDateTime: new Date(2011,2, 13),
CssClass: '',
Description: 'GRIPS Presentations11:00am - 1:00pm',
EndDateTime: new Date(2011,2, 13),
Title: '11:00am GRIPS Pre....'},{ EventID: 459818,
StartDateTime: new Date(2011,2, 16),
CssClass: '',
Description: 'BIOL 695 Structural Biology Seminars/Sanders (old BIOL 696E)12:45pm - 3:00pm',
EndDateTime: new Date(2011,2, 16),
Title: '12:45pm BIOL 695 ....'}
Hey, i would like to know where i can see this calendar working, like a demo online or something like that. If there’s no where i can do that, please make a demo site, that will help i guess.
Thank u
Thanks for the great plugin! Does exactly what I need with almost no effort on my part. I found one issue, though: _drawEventsOnCalendar has trouble in months where Daylight Savings changes. When displaying March 2011, for example, for events after March 12 the TimeSpan class (correctly) returns a value representing one less calendar day, but with 23 hours added. I hacked my way around it by rounding the date difference that gets passed in to the nearest full day, like this:
var startI = new TimeSpan(Math.round((tempStartDT - _dateRange.startDate)/86400000)*86400000).days;
var endI = new TimeSpan(Math.round((tempEndDT - _dateRange.startDate)/86400000)*86400000).days;