[fullcalendar]Have listMonth display more details

Question

I'd like to display different event information with different views.

In view 'month' I'd like to only display the most necessary data, like 'title'.

But in view 'listMonth' I'd like to display additional information about an event.

I tried the following but have no idea why this doesn't change the event's title when in listMonth view.

$("#calendar").fullCalendar({
  views: {
    listMonth: {
      buttonText: 'list',
      displayEventTime: true
    }
  },
  events: [{
    title: 'event1',
    id: '1',
    start: '2018-01-13T11:00:00',
    end: '2018-01-13T15:00:00',
    addtlTitle: 'event1, where, what, how'
  }],
  eventRender: function(event, element, view) {
    if (view.name == "listMonth") {
      event.title = event.addtlTitle;
    }
  }
});

Answer 1

As per the docs (https://fullcalendar.io/docs/event_rendering/eventRender/) when eventRender runs, it has already created the HTML element which is going to be added to the calendar. This is provided as the "element" parameter in the callback. Modifying the "event" object at this stage has no effect - it's only there so you can access more properties of the event, in order to alter the HTML element.

Instead you must inspect the HTML structure for rendered events in that view type, and work out what to alter. In this case, the code is quite simple:

eventRender: function( event, element, view ) {
  if (view.name == "listMonth")
  {
     element.find('.fc-list-item-title').html(event.addtlTitle);
  }
}, 

See here for a working demo: http://jsfiddle.net/sbxpv25p/81/