Display more Text in fullcalendar

This code can help you :

$(document).ready(function() {     $('#calendar').fullCalendar({         events:             [                 {                     id: 1,                     title: 'First Event',                     start: ...,                     end: ...,                     description: 'first description'                 },                 {                     id: 2,                     title: 'Second Event',                     start: ...,                     end: ...,                     description: 'second description'                }            ],         eventRender: function(event, element) {             element.find('.fc-title').append("<br/>" + event.description);         }     });}   

I personally use a tooltip to display additional information, so when someone hovers over the event they can view a longer descriptions. This example uses qTip, but any tooltip implementation would work.

$(document).ready(function() {    var date = new Date();    var d = date.getDate();    var m = date.getMonth();    var y = date.getFullYear();    $('#calendar').fullCalendar({        header: {            left: 'prev, next today',            center: 'title',            right: 'month, basicWeek, basicDay'        },        //events: "Calendar.asmx/EventList",        //defaultView: 'dayView',        events: [        {            title: 'All Day Event',            start: new Date(y, m, 1),            description: 'long description',            id: 1        },        {            title: 'Long Event',            start: new Date(y, m, d - 5),            end: new Date(y, m, 1),            description: 'long description3',            id: 2        }],        eventRender: function(event, element) {            element.qtip({                content: event.description + '<br />' + event.start,                style: {                    background: 'black',                    color: '#FFFFFF'                },                position: {                    corner: {                        target: 'center',                        tooltip: 'bottomMiddle'                    }                }            });        }    });});

With the modification of a single line you could alter the fullcalendar.js script to allow a line break and put multiple information on the same line.

In FullCalendar.js on line ~3922 find htmlEscape(s) function and add .replace(/<br\s?/?>/g, '
') to the end of it.

function htmlEscape(s) {    return s.replace(/&/g, '&')    .replace(/</g, '<')    .replace(/>/g, '>')    .replace(/'/g, '&#039;')    .replace(/"/g, '"')    .replace(/\n/g, '<br />')    .replace(/<br\s?\/?>/g, '<br />');}

This will allow you to have multiple lines for the title, separating the information. Example replace the event.title with title: 'All Day Event' + '<br />' + 'Other Description'