Playing with Fullcalendar

The Fullcalendar jQuery plugin is great to work with, it has so many features and I became amazed at how much work must have been put into it. I've had occasion to use the plugin and encountered a particularly thorny issue about selectively getting the date to change color, like the example above. What made things difficult was that each individual cell of the calendar did not have a unique id. Furthermore, the calendar uses the same cells for each month, so each changed cell had to be returned to normal before new information could be rendered. The plugin was being used along with the viewmore code; it was really tough finding a way to make the effect happen but a solution was eventually found. For this, I really have to thank Mr. Vishal Jadhav for pointing me in the right direction (you can see his blogs here and here). The code though didn't work as is so some tinkering had to be done:

The properties of each event object were set and the whole list was passed through JSON from the Controller; the event title property was used to set the markup of the event. The script would search for calendar events with the holidayRemark class, then figure out which cell in the calendar the events fell on; after it did that the script would then add the holiday class, which would turn the calendar cell's date and text red. Mr. Jadhav actually does a better job of explaining how the solution works, and you can view that here.

Now, in order to remove the date colors when the user cycles between months a rather inelegant workaround was used: see, each cell has a class .fc-day#, where # is a number from 1 to 42. The date number is in a div with class .fc-day-number, the div in turn is a child element of the div that has .fc-day#. We just put a for loop in the section of the viewmore code handling cycling between months, removing the holiday class from the particular .fc-day-number div. The code is below:

As I recall, this was around line 74 of the plugin code. As a final reminder, please be informed that the calendar renders incorrectly in Chrome because the browser orders the events based on the start and end properties of each event. Events which have the same start and end time get rendered in the proper cell, but in what appears like random order (more information here). My workaround was to add the index of the event from the list that came from the database to the minutes of the start and end date of the event; if additional entries need to be added that have to be below that specific event, one can add an arbitrary number of seconds to the start and end properties.

Lastly, here are the holiday and holidayRemark classes used:

.holiday
{
    font-weight: bold;
    font-style: italic;
    color: Red;
}

.holidayRemark
{
    font-style: italic;
    color: Red;  
}

UPDATE: Mr. Jadhav's work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported license. Clicking on the link will take you to the page listing the license's terms.