[fullcalendar]Have listMonth display more details than month

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

Generally the answer is by writing some code to do so! But you surely can't be expecting us to write that code for you, especially based on such an incredibly vague description — Mark Baker, Jan 01 '18 at 16:27
It looks like you want us to write some code for you. While many users are willing to produce code for a coder in distress, they usually only help when the poster has already tried to solve the problem on their own. A good way to demonstrate this effort is to include the code you've written so far, example input (if there is any), the expected output, and the output you actually get (console output, tracebacks, etc.). The more detail you provide, the more answers you are likely to receive. Check the [FAQ] and [ask]. — , Jan 01 '18 at 16:30
Actually, I did some research on my problem and found this tip: https://stackoverflow.com/questions/9410576/fullcalendar-displaying-different-info?rq=1 but the rendering simply has no effect. I'm stuck and just looking for some additional examples. I have added the code from the given link to my script and while it runs with no errors, it also does not change the event.title in the view "listMonth"... — ph0nq, Jan 01 '18 at 17:04
Here's what I've actually put in my script: $("#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; } } }); }); No idea what this doesn't change the event's title when in listMonth view. Any hints welcome... — ph0nq, Jan 01 '18 at 17:18

score 3 · Accepted Answer · answered Jan 02 '18 at 06:29

3

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/

answered Jan 02 '18 at 06:29

ADyson

57,178
14
51
63

1

Thank you so much ADyson! I've tried to leave my Q on Alexxus' post but as a newbie I'm not allowed to do so. I must admit the docs left me unsure now and then as the non-native speaker I am but I had a feeling I'm missing something obvious here. So, again, thanks very much - your code works like a charm! – ph0nq Jan 02 '18 at 08:05
As a side note, where could I find documentation about such attributes like ".fc-list-item-title"? They don't seem to be included in the docs on fullcalendar.io... – ph0nq Jan 03 '18 at 09:14
They're not attributes, they're class names which fullCalendar decorates the HTML elements it creates with (presumably in order to manipulate them and give them meaningful identities and styling). Strictly they're internal things (hence not documented) and could be subject to change when fullCalendar is upgraded, but it's the best you have got in terms of trying to manipulate the event's HTML. The HTML and classes used also vary between the different types of view (inevitably), which is an added complication. – ADyson Jan 03 '18 at 09:26

[fullcalendar]Have listMonth display more details than month

1 Answers1

Linked