fullcalendar - display half-day event in the month view - fullcalendar

Question

How do you display a half-day event in the month view? For instance, I have an event that is 12 hours long. I would like the date cell for that event to only show a half bar. Is that possible? If so, how do you implement this?

Answer 1

So the events are positioned "absolute", this is a tricky one .....
Use of the eventAfterRender callback like this :
, eventAfterRender: function(event, element, view) {
/**
* get the width of first day slot in calendar table
* next to event container div
*/
var containerWidth = jQuery(element).offsetParent()
.siblings("table").find(".fc-day-content").width();
// half a day
var elementWidth = parseInt(containerWidth / 2);
// set width of element
jQuery(element).css('width', elementWidth + "px");
}
Surely can be improved :-)

Answer 2

A little late to the party, but I've just managed to implement this in a way that works great, and works when the page is resized too.
eventAfterRender doesnt seem to work for me, but eventRender will do the same thing:
eventRender: function (event, element) {
// Get the page width, then
// subtract the margins around the side. I'm assuming a full
// size calendar with a margin of 15px on each side here.
var width = getWidth()-30;
width = width / 14; (7 days = 14 half days)
jQuery(event.el).css('margin-left', width + "px");
}
You then need to reload the events when the browser window is resized so that they remain in the middle, otherwise they will drift.
window.addEventListener('resize', function () {
calendar.refetchEvents();
});
Note: for getting the browser width I'm using this function to ensure it works across different browsers:
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}