fullCalendar - Event title and detail

Question

I'm using the pretty fullCalendar jQuery plugin.

I'd like to be able to have a title AND a detail on each event as in the screenshot below:

Here the details are the participants for each session. (overflow hidden on the detail)

score 50 · Accepted Answer · edited May 23 '17 at 11:46

50

See This (Eureka's Answer)

eventRender: function(event, element)
{ 
    element.find('.fc-event-title').append("<br/>" + event.description); 
}

edited May 23 '17 at 11:46

Community

1
1

answered Oct 13 '10 at 14:40

orolo

3,951
2
30
30

Thx, I didn't find this thread before. This is a good solution. – Pierre de LESPINAY Oct 14 '10 at 07:02
12

'.fc-event-title' is no longer used, use '.fc-title' as your selector – mjroodt Feb 04 '16 at 08:37
4

Is this the proper way to do this ? what if class name changes on newer versions ? – Shamseer Ahammed May 23 '19 at 08:57
@ShamseerAhammed eventRender no longer exists in v5. – Sven Cazier Dec 09 '21 at 10:19
@SvenCazier what's the alternative solution to eventRender for v5? – Rich Feb 12 '22 at 23:20
use the `eventDidMount` callback and access the `extendedProps` data, as per answer below – itsgus.dev Jul 14 '23 at 19:40

score 6 · Answer 2 · answered Dec 07 '20 at 10:48

6

Based on fullcalendar documentation

V5

If you want to set the title use eventDidMount instead of eventRender

eventDidMount:function(info){
   info.el.title="---- YOUR TEXT----"
}

answered Dec 07 '20 at 10:48

Abolfazl Roshanzamir

12,730
5
63
79

Note that doesn't change the displayed text (at least in "list" views), I use `mountArg.el.children[2].innerHTML = "Custom title with HTML Tag"` to di this. Just use the correct children which may be different from my example based on view type. – Skunka Jan 31 '22 at 09:06
`info.el.title` not work in v6, use `info.event.setProp("title", "");` instead – frank May 30 '23 at 03:29
You are correct with the `eventDidMount` callback, although the way to access the data is via the `extendedProps` key as per example below. – itsgus.dev Jun 09 '23 at 01:22

score 1 · Answer 3 · answered Jun 09 '23 at 01:19

Currently (V6) a solution is to use the eventDidMount callback and access the extendedProps data:

eventDidMount: function(info) {
  var eventElement = info.el;
  let descriptionElement = document.createElement('div');
  descriptionElement.innerHTML = info.event.extendedProps.description;
  eventElement.appendChild(descriptionElement);
}

Style your element to display as needed.

score 0 · Answer 4 · answered Mar 27 '20 at 17:52

0

For anybody having this issue in Angular 8:

eventRender: function(event, element)
{ 
    (element as Element).querySelector('span.fc-title').append("<br/>" + event.description); 
}

answered Mar 27 '20 at 17:52

filip.georgiev

1
1

fullCalendar - Event title and detail

4 Answers4

V5