fullcalendar: Break line in title of events

Originally reported on Google Code with ID 179

FullCalendar currently ignores newlines. It would be very useful if this 
feature was implemented. Sometimes I need to put long day event on the 
calendar with long desscription on this event (in title). And I just cannot 
put break lines into the text so it looks very messy.

I would appreciate if this issue will be at least considered as worth 
thinking about.

Thanks in advance,
Marcin

Reported by marcin.milinski on 2009-11-11 08:29:54

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 1
Comments: 24 (12 by maintainers)

Most upvoted comments

Hello People, Simply just add this below line to your stylesheet .fc-day-grid-event .fc-content{ white-space: normal!important; }

+12

rahuljs on Sep 25, 2017

Thanks @GreybeardTheUnready - I found a similar way to change the title (using with Angular)

eventDidMount: function (info) {
      // If a description exists add as second line to title
      if ( info.event.extendedProps.desccription != '' &&
        typeof info.event.extendedProps.description !== 'undefined'
      ) {
        const a = info.el.getElementsByClassName('fc-event-title');
        a[0].innerHTML = info.event.title +  '<br>' + '<span style="color:red">' +
          info.event.extendedProps.description +  '</span>';
      }
    },

mrobst on Jan 19, 2022

Update to MRSAIHAIK’s entry. eventRender disappeared in V5 ( See this: ) - so try this…

  eventDidMount: function(info) {               // If a description exists add as second line to title
    if(info.event.extendedProps.description != '' && typeof info.event.extendedProps.description  !== "undefined") {  
        $(info.el).find(".fc-event-title").append("<br/><b>"+info.event.extendedProps.description+"</b>"); 
    }
  },

As developers have said for years “It works for me” 😃

GreybeardTheUnready on Jan 5, 2022

You can use html line breaks (<br />), that seems to work.

Reported by google@jankg.com on 2009-11-13 11:43:56

arshaw on Aug 19, 2015

I found a way to make the title accept HTML code.

eventRender: function(event, element) {                                          
    element.find('span.fc-event-title').html(element.find('span.fc-event-title').text());                   

}

It works for me ;)

Reported by bibendus1983 on 2009-12-02 14:42:49

arshaw on Aug 19, 2015