API (for dynamically creating events)

[x68507]

Although the visual format is pretty good for jqmCalendar, unless you publish the APIs or a "how-to", this is almost useless as a dynamic calendar. There is no information about how to add/change an event and the read-me file is too small to even be considered somewhat useful.

[jwgmeligmeyling]

To create events dynamically, simply create an object in the following format, append it to the event array supplied and force the calendar to repaint (for instance by selecting another month).

{ "summary" : "Test event", "begin" : new Date(), "end" : new Date() }

Please note that the Date constructor takes some arguments that might fit your needs better than just returning the date/time at creation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

The whole library is about 250 sloc, so I think any additional information isn't too much of a pain to figure out yourself. If you do see any improvements for the API documentation / Readme file though, please make a merge request with your suggested changes.

[x68507]

I can easily repaint the canvas simply using "$('#myCalendar').trigger('refresh');", but I'm having trouble trying to access the actual EVENTS array object. How can I request the events array in order to append to it?

[jwgmeligmeyling]

You can separate the array from the settings object like this:

// Create an array that will contain the events
var eventsArray = [];

// Dynamically add events to the array (this can be done later on as well)
eventsArray.push({ "summary" : "Test event", "begin" : new Date(), "end" : new Date() }); 

// Initialize the calendar
$("#myCalendar").jqmCalendar({
   events : eventsArray, // Point to the events array now
   months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
   days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
   startOfWeek : 0
}); 

// Add another event
eventsArray.push({ "summary" : "Test event", "begin" : new Date(), "end" : new Date() }); 
// Trigger refresh
$('#myCalendar').trigger('refresh');

Edit Clarified a bit

[x68507]

Perfect. I didn't have a global eventsArray in my code. After initializing this array, I am able to dynamically add events. Thanks!

[jwgmeligmeyling]

I have just changed the read me a bit : https://github.com/JWGmeligMeyling/jqm-calendar