JQuery fullCalendar: problem with modified elements using eventAfterRender

I wasn't liking the fact that a half-hour event wasn't taking up enough space in my calendar, so I have modified the element using the below code:

$(document).ready(function() {
    $("#CalendarControl").fullCalendar({
        eventAfterRender: function(event, element, view) {
            var halfHour = 60 * 30 * 1000; // in milliseconds
            if((event.end - event.start) <= halfHour){
                elemen开发者_开发百科t.height(40);
                element.find(".fc-event-time").text($.fullCalendar.formatDate(event.start, "HH:mm") + ' - ' + $.fullCalendar.formatDate(event.end, "HH:mm"));
                element.find("A").append("<span class=\"fc-event-title\"></span>")
                element.find(".fc-event-title").text(event.title);
            }
        }
    });
})

As you can see, I'm basically making it take up the same space as an hour long event, plus formatted as such.

The only trouble is, that it can now overlap an older event, as the previous auto-overlapping code has already happened (and found itself not required), so I need a way to render the calendar again (WITH my changes)?

Many thanks.

So the half hour event takes up an hour's worth of space? That sounds potentially confusing, since it will look like it ends half an hour later. If you want to change the size of all events, you could try setting the defaultEventMinutes to perhaps 15 (which will make a half hour event take up two slots instead of one) or even 10 (so a half hour event takes up 3 slots). Of course your hour events will take up more space as well, but this will provide a correct view of the situation to those reading the calendar.

To change the behavior so that you have the calendar respecting artificially large events changed by eventAfterRender you're going to have to modify the calendar's collision checking code in the source.

If you want your half hour events to actually be hour events, you can call updateEvent to make it an hour long event after the fact. Or just change it in your data source.

Have you tried setting up a timeout to call "rerenderEvents"?

   if((event.end - event.start) <= halfHour) {
     // ... whatever ...
     setTimeout(function() {
       $('#CalendarControl').fullCalendar('rerenderEvents');
     }, 10);
   }

I was pointed to using eventRender rather than eventAfterRender, which works for me in a slightly different context

For example

$(document).ready(function() {
  $("#CalendarControl").fullCalendar({
    eventRender: function(event, jqElement, view) {
      jqElement.height(40);
    }
  }
}