fullcalendar - display half-day event in the month view

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开发者_JAVA技巧 like the date cell for that event to only show a half bar. Is that possible? If so, how do you implement this?

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 :-)

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
    );
}