Joe Lu Joe Lu -3 years ago 113
jQuery Question

is there a way to display different information in different mode using fullcalendar.js?

wondering if there's a way to display different information in different mode of fullcalendar

for example:
in monthly mode: title: 'short title', description showing as tooltips.
in weekly mode: title: 'long title' and description is showing under the title?

Answer Source

I actually found a similar question and would like to post that answer to my own question. Basically, instead asking "different mode", I guess I should change it to "different view", and yes, the fullcalendar supports element rendering for different view, here is the example by using the eventAfterRender and put a condition when it's in daily view

$('#calendar').fullCalendar({
    eventRender: function (event, element) { ... },
    viewRender: function (view, element) { ... }, 
    eventAfterAllRender: function (view) {
        if ($('.fc-basicDay-view').length > 0) {
            $('.cl').each(function (i, item) {
                var title = item.title;
                item.innerText = item.innerText + ' - ' + item.title;
                $(this).css('font-size', '14px');
            });
        }
    }
});

credit to the following post: FullCalendar - Changing the text in the basicDay view

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download