Thursday, February 21, 2013

Removing the spacing between events in FullCalendar and Viewmore

I'd earlier wrote about using FullCalendar and Viewmore in an application here. It turns out that the plug-ins render individual events with a space in between; it's quite hard to find a way to remove it and I was tasked with making some events have specific background colors. The requirement was to remove those spaces and present the colored spaces as one "block" of colors.

The code below was the solution for the FullCalendar situation, the code modifies the renderDaySegs function in the code:


The Viewmore code is a bit special; it clones the individual event elements that would have been displayed in the FullCalendar, then puts them in an unordered list. This list is what gets displayed when one clicks the "View More" button. The code is below:


The code at line 277 above is pretty interesting, you need it to make sure that there is no whitespace at he bottom of the Viewmore panel. It limits the height of the unordered list, and the panel sort of automatically resizes to fit that list.

UPDATE: Apparently my fix for the Viewmore functionality doesn't work for IE or Firefox. It looks like the two browsers render the pixel count differently and so the panel comes up short.

No comments:

Post a Comment