Display more Text in fullcalendar
I am looking for a solution to display more information in event.
For example in the DayView you see a event from 06:00 to 10:00.
I want to display a additional description in this event (not only the time and the title).
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, ''')
.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'