$().ready(function() {
    var options = { };
    var events = [ ];
    $.jMonthCalendar.Initialize(options, events);
});

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'
    }
};

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

//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));
});

343 thoughts on “jMonthCalendar”

1. sorry..but inside the folder there’s no page called DEMO.html !?

   • Ah! Get the 1.2.1 version from Google Code. http://code.google.com/p/jmonthcalendar/downloads/list

2. Pingback: 日付入力のためのjQueryプラグイン 10選 - ElectronicBrain is eating BreakFast

3. Pingback: 10 Best jQuery Datepickers Plugins - Code Index

4. I’ve translated your post.

5. Kyle, great work!  Is there a way to turn off the "Today" link?  Also, I changed the Prev and Next navLinks to « and «.  But I am getting the default > and <, is there a way to turn that off too?

   Thanks!

   • Hi Benjamin,

     I just completed these features, they will be in a next release which can be expected latter today along with some other enhancements. The today link is more configurable and the next and previous links are more configurable now.

     Thanks for the suggestions,
     Kyle

     • Woah, super fast reply. You are great!

       I was wonder if the same is try for diabling NextYear, PrevYear.

       And, is there a way to hyperlink the month?

       I am integrating your lovely plugin into an instance of Expression Engine. Once complete, I will be more than happy to do a write up for ya.

     • Was this update posted, Kyle?

       Just curious- thanks!

6. Pingback: jQuery Full Month Calendar Plugin Supports Events | Joe Hana

7. Have you ever thought about integrating this into a Drupal module? The calendar displays out there now are not very friendly.

   • I’m not that familiar with or use Drupal (as of now). However I encourage anyone else to start a project to create a module. I will provide support and help related to jMonthCalendar as best as I can.

8. Does anyone know how to remove the white space (I don’t think its padding or margin) that this plugin produces? You can see a same here. This section of the site isn’t live and isn’t fully operational, so dont judge me!

   Thanks in advance!

   • same = sample. Sorry about the typo.

   • ugh, I am embarrassed. Kyle, sorry about the same I am creating here.

     But, I thought I would clarify. I mean the white space between the TRs and TDs.

     Thanks.

     • To answer my own question: Setting the cell spacing to 0 within the plugin.

9. is there a way to limit the number of events listed per day and then append a “view more” type link to link to another page?

   • Not at the current moment. I have been trying to think of something though that will work with multi-day events.

     • Kyle,
       I was wondering if you’ve come up with a patch for events that expand over multiple days yet? We’re in need of that implementation. Any suggestions on what you might have figured out so far would be helpful.

       Thanks,
       Devon

       • Thanks, maybe a week or two. I have been busy at work for the last few weeks and haven’t had much energy at night to work on it. I have got a good chuck of it done already though. Events will now be absolutely positioned over the event days and I am trying to work out a scheme for more events than will fit in a day along with the way events will wrap months/weeks.

10. anybody have any ideas on how to implement jmonthcalendar with thickbox?
    in simple word, i want to use URL on events, when it clicked then the page to be showed using thickbox..
    thanks,

11. Having trouble with onMonthChanging AJAX call. Any clues why this doesn’t work? If I copy/paste the output, and put it right inside the [ ] it works fine, but not as my variable newJson!

    ===================
    onMonthChanging: function(dateIn) {
    newJson = $.ajax({
    async: false,
    type: “POST”,
    url: “http://www.myurl.com/test/testjson.php”,
    }).responseText;

    alert(newJson) // {“EventID”:1,”Date”:”2009-04-23″,”Title”:”TPS Reports”,”URL”:”#”,”Description”:”unused”,”CssClass”:”Meeting”}

    var events = [ newJson ];

    $.jMonthCalendar.ReplaceEventCollection(events);
    return true;
    },
    ===================

    Any suggestions greatly appreciated!

    • Newbie error I forgot to encode the responseText into a JS object. Here’s what I did for anyone else in my situation. Perhaps someone can suggest if this is the best way or not:

      ===================
      onMonthChanging: function(dateIn) {
      newJson = $.ajax({
      async: false,
      type: “POST”,
      url: “http://www.myurl.com/test/testjson.php”,
      }).responseText;

      // return from ajax/php is something like:
      // newEvents = {“EventID”:1,”Date”:”2009-04-23″,”Title”:”TPS Reports”,”URL”:”#”,”Description”:”unused”,”CssClass”:”Meeting”}

      // eval newJson to turn result into js object
      eval(newJson);
      var events = [ newEvents ];

      $.jMonthCalendar.ReplaceEventCollection(events);
      return true;
      },
      ===================

      • Are you able to get multiple events registerd? I can only get the first event to get register with jCalendar.

        • Yes, I had to adjust the output of my PHP JSON file.
          I put the brackets at the beginning and end, followed by the semicolon [ ]; with a comma in between.

          Example output looks like this:
          ================================================
          newEvents = [ {"EventID":1,"Date":"2009-04-23","Title":"TPS Reports","URL":"#","Description":"unused","CssClass":"Meeting"}, {"EventID":2,"Date":"2009-04-25","Title":"Going Fishing","URL":"#","Description":"unused","CssClass":"Birthday"} ];
          ================================================

          As for the PHP, I’ll eventually construct a loop to generate this output, but for testing purposes, I hard coded it, to make sure I had the right format:
          ================================================
          1,’Date’=>’2009-04-23′,’Title’=>’TPS Reports’,'URL’=>’#',’Description’=>’unused’, ‘CssClass’=>’Meeting’);
          $arr2 = array (‘EventID’=>2,’Date’=>’2009-04-25′,’Title’=>’Going Fishing’,'URL’=>’#',’Description’=>’unused’, ‘CssClass’=>’Birthday’);

          echo “newEvents = [ ";
          echo json_encode($arr);
          echo ", ";
          echo json_encode($arr2);
          echo " ];”;
          >?
          ================================================

          Hope this helps you!

          • Hi, I just want to add this: you have to validate if there is no data returned from database, then you have to return the empty list like this: newEvents = [{}]

            By the way, excellent plugin Kyle, keep on the good work

          • Thanks for the input, I hope my recent comment helps you out. I am doing something similar in a website I am building as well.

          • Hi Greg,
            I can see that you’re doing great on retrieving data from MySQL using JSON. Could you please show me how to do that in an example…please email me novianto.agam@gmail.com,

            greatly appreciated
            novianto

12. Hi Kyle,

    First and foremost, thank you very much for this great tool. I would like to ask on how to add tooltip that shows description of the event.

    I have managed to show the tooltip inside the form using Richard’s suggestion using simpletooltip and it works, however when I tried to use it inside a user control, it doesn’t show. How do I add tool tip function?

    Thanks.

13. There’s a bug in AddEvents.

    I guess you´re trying to check if eventCollection is an array of event objects or just a single event object. You do this by checking if eventCollection.length > 1. If you pass an array of length 1 to this function it will assume it’s a single object and append the array to calendarEvents.

    My solution is instead to:
    if (eventCollection.constructor == Array) {
    jQuery.each(eventCollection, function() {
    calendarEvents.push(this);
    });
    } else {
    calendarEvents.push(eventCollection);
    }

    • Good call, I will take a look at it and probably make the appropriate change.

14. CUSTOM CALENDAR COLOR:

    On my site, the user selects a color from a color picker and the hex value is saved in MySQL. I’ve updated the jMonthCalendar file to use this value, instead of hard coding the CSS background-color. Here’s my steps:

    1. Update the JSON output to include the variable “myColor”. Query your database to get the value
    “myColor”:”#0000ff”

    2. Add the following line after line #340
    #340: (var event = jQuery(”).append(link);)

    // Addition to permit custom calendar colors
    event.css(“background-color”, ev.myColor);

    3. Lastly, comment out the next line, that assigns the CssClass
    // if(ev.CssClass) { event.addClass(ev.CssClass) }

    Works for me so far. Hope this helps someone else too!

15. I had a few issues with dates. I m using this in a grails application that fetches data from a MySql database. My dates are of the format:

    yyyy-mm-ddThh:mm:ssZ

    My groovy controller has:
    (blah is my result set from the database)
    return [blah:blah as JSON]

    and I serialized my object to the events option.
    var events=${blah}

    I did have to change the regex checking within GetJSONDate() in the javascript. Everything else was a breeze. Great plugin!

16. I’m trying to add to events into the same cell, when I do this the calendar is expanded beyond the normal height of 650. I would like to write something to remove the attribute of “height” I think this would solve my problem. When I try the following it just keeps showing back up automatically.

    $(‘div#jMonthCalendar’).removeAttr(“height”);

    and I would like to follow that up with.

    $(‘div#jMonthCalendar’).attr(‘height’, auto);

    This will always add the height, auto but the height of 650 keeps showing back up.

    Any help would be grand. or if I can set this to auto height that would be better.

    Wade

    • I was able to remove the height after load by using the following

      $(‘div#jMonthCalendar’).removeAttr(“style”);

17. I need help using the new Qtip, Qtip is the replacement to simpletips that Richard mentioned above.

    I tried loading

    onEventBlockOver: function(event) {
    selector = ‘#Event_’+event.EventID;
    $(selector).qtip({ content: event.Description });
    return true;
    }

    I’m getting an error on the ‘#Event_’ in visual studio ( ‘ ) has a green squiggly line? has anyone used Qtips with this Calendar…

    Thanks
    WadeO

    • QTip works fine for me with this cofiguration:
      onEventBlockOver: function(event) {
      if ($(‘#Event_’+event.EventID).hasClass(‘hasToolTip’) == false && event.Description != ”){
      $(‘#Event_’+event.EventID).addClass(‘hasToolTip’);
      $(‘#Event_’+event.EventID).qtip({
      content: event.Description,
      show: ‘mouseover’,
      hide: ‘mouseout’,
      position: {
      target: ‘mouse’,
      adjust: { mouse: true }
      },
      show: { ready: true }
      });
      return true;
      }
      }

18. Just what I need! A quick question, is there a simple way of getting the week to start on monday?

    • Yeah in Version 1.2.2 there is an option to overide the first day of week. Property is called “firstDayOfWeek” in the options/defaults.

19. Thanks –
    firstDayOfWeek: 1,
    Gives me monday as first day.

    Will post a link to the project using this calendar – was so happy to find your code.

    FYI there are various formats for date in the examples on this page:

    “StartDate”: new Date(2009, 1, 1),
    “StartDateTime”: new Date(2009, 1, 1),
    “Date”: “2009-05-11T00:00:00.0000000″

    The only one that is working for me in latest Firefox and Safari on Mac is the last one.

20. So I am having some issues with using onMonthChanging and I am not entirely sure how to fix it. Basically here is my onMonthChanging code…….

    onMonthChanging: function(dateIn) {

    var events = new Array();

    $.getJSON(“/events/2009/04/”, function(data){
    $.each(data, function(i,event){
    events[i] = {“EventId”: event.pk, “StartDate”: event.fields.date, “URL”: “#”, “Description”: event.fields.description, “CssClass”: “events”};
    });
    $.jMonthCalendar.ReplaceEventCollection(events);
    });
    return true;
    },

    Basically whats happening is the getJSON jquery function is taking too long to run and the ReplaceEventCollection function isnt being called till too late. The jQuery.J.ChangeMonth function already has drawn the new calendar before the ReplaceEventCollection function has had a chance to update the calendarEvents variable with what im getting from the JSON request.

    Any ideas if I am going about this wrong or if there is a better way to have the javascript stall till its ready to draw?

    • So I think you might be going about it a little backwards. I would use the onMonthChanged event and leave everything you have. You will also have to call AddEvents passing your array of events, and you can optionaly call ReplaceEventCollection with an empty arry to clear it out. AddEvents will update the array container (pushing the new events into the existing array) and then it will clear events already being displayed, followed by drawing the new event array. It would be something like this:

      onMonthChanged: function(dateIn) {

      var events = new Array();
      $.jMonthCalendar.ReplaceEventCollection(events);

      $.getJSON(”/events/2009/04/”, function(data){
      $.each(data, function(i,event){
      events[i] = {”EventId”: event.pk, “StartDate”: event.fields.date, “URL”: “#”, “Description”: event.fields.description, “CssClass”: “events”};
      });
      $.jMonthCalendar.AddEvents(events);
      });
      return true;
      },

      This will then draw the calendar and any events you initialized it with (like the started month, default). The when you change the month the calendar body will be drawn again, any events drawn. Then you event hook onMonthChanged will fire clearing out the events and adding your new ones returned from the AJAX query.

      I know this may seem a little. I look forward to any improvements on the workflow if you have any. Let me know how this works out for you.

      • Hi,
        I’ve used this code, but I get each event twice. In the JSON array and the javascript array is each event only once. Can you help me?

        • Hi, I would be glad to help. Would you mind providing me with the code you use to initialize the calendar and the version you are using? Thanks.

          • I’m using jMonthCalendar 1.2.2 and jquery 1.3.2.
            I’m using this code to initialize calendar:
            var options = {
            height: 250,
            width: 400,
            navHeight: 25,
            labelHeight: 25,
            firstDayOfWeek: 1,

            onMonthChanging: function(dateIn) {
            loadEvents(dateIn);
            },
            onEventLinkClick: function(event) {
            $.get(”,{ date: date, capacity: getId();?> },function(data){
            loadEvents(date);
            });
            return true;
            },
            onEventBlockClick: function(event) {
            $.get(”,{ date: date, capacity: getId();?> },function(data){
            loadEvents(date);
            });
            return true;
            },
            onEventBlockOver: function(event) {
            //alert(event.Title + ” – ” + event.Description);
            return true;
            },
            onEventBlockOut: function(event) {
            return true;
            },
            onDayLinkClick: function(date) {
            return true;
            },
            onDayCellClick: function(date) {
            $.get(”,{ date: date, capacity: getId();?> },function(data){
            loadEvents(date);
            });
            return true;
            }
            };

            var events;

            $.jMonthCalendar.Initialize(options, events);
            loadEvents(new Date());
            });

            here is the function loadEvents(date):
            function loadEnterings(dateIn){
            var enterings = new Array();
            $.jMonthCalendar.ReplaceEventCollection(events);
            $.getJSON(‘/occupation/index’,{ date: dateIn, capacity: 2 },function(data){
            $.each(data, function(i,event){
            events[i] = {“EventID”: event.id, “Date”: “new Date(“+event.year+”,”+(event.month-1)+”,”+event.day+”)”, “Title”: event.description, “URL”: “#”, “Description”: “”, “CssClass”: event.title};
            });
            $.jMonthCalendar.AddEvents(events);
            });
            return true;
            }

            Thanks for any help