Change the default event cell view in FullCalendar jQuery plugin

Question

Maybe is an obvious question but I search on FullCalendar API, SO and google with no results. I wondering if I can change the default cell view of every event into the FullCalendar?

For example my current events cell are only showing the time and the title I parsed from the data object. When I try to parse more data in the object I cannot display them into the calendar cell

events: [
    {
        title: 'All Day Event',
        start: '2015-02-01'
        morecontent : 'MORE CONTENT' // How to display this??
    },
    {
        title: 'Long Event',
        start: '2015-02-07',
        end: '2015-02-10'
        morecontent : 'MORE CONTENT' // and this??
    }
];

Answer 1

You can change the cell during the eventRender , which is triggered when the event is being rendered ( docs ).

Something like the code below will find the title for that specific event and replace the html with the title + the more content:

eventRender: function(event, element) {
    $(element).find('.fc-title').html(event.title + ', ' + event.morecontent);
}

Here's a working version:

 $('#fullCal').fullCalendar({ events: [{ title: 'Random Event 1', start: moment().add(-4, 'h'), end: moment().add(-2, 'h'), morecontent: 'Eat Pizza', allDay: false }, { title: 'Random Event 2', start: moment().add(1, 'd'), end: moment().add(2, 'd'), morecontent: 'Drink Coffee', allDay: false }, { title: 'Random Event 3', start: moment().add(6, 'd'), end: moment().add(8, 'd'), morecontent: 'Hackathon', allDay: false }], header: { left: '', center: 'prev title next today', right: '' }, eventRender: function(event, element) { $(element).find('.fc-title').html(event.title + ', ' + event.morecontent); }, timezone: 'local' }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.min.js"></script> <div id="fullCal"></div> 

Answer 2

It seems like so far, your JSON (from the database) is creating the code you provided above. If so, then whatever its in morecontent should already be passed as a result to your fullcalendar object.

To test use:

eventClick: function(calEvent, jsEvent, view) {
     console.log(calEvent);
}