jMonthCalendar-1.3.2-beta Release

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, []);
});
This entry was posted in Programming and tagged , , . Bookmark the permalink.

8 Responses to jMonthCalendar-1.3.2-beta Release

  1. Nakkaka Arthur says:

    How do I switch to the mini version of the calendar using the short forms of the dates like Mon, Tue

  2. joe says:

    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

    • Kyle says:

      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.

  3. Lawrence Ong says:

    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.

    • Kyle says:

      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.

  4. Cjx says:

    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"}]

    • Kyle says:

      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"}]…?

  5. Travis Beck says:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">