CODEWITHSUNDEEP
javascriptjqueryfullcalendarrendering
Pierre de LESPINAY
Pierre de LESPINAY

Reputation: 46208

fullCalendar - Event title and detail

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)

Upvotes: 22

Views: 54258

Answers (4)

gschiavon
gschiavon

Reputation: 95

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.

Upvotes: 1

Abolfazl Roshanzamir
Abolfazl Roshanzamir

Reputation: 14892

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----"
}

Upvotes: 6

filip.georgiev
filip.georgiev

Reputation: 1

For anybody having this issue in Angular 8:

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

Upvotes: 0

orolo
orolo

Reputation: 3951

See This (Eureka's Answer)

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

Upvotes: 50

Related Questions