Display more Text in fullcalendar

Question

I like the fullcalendar JQuery-Plugin. At the moment 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. Now i want to display a additional description in this event (not only the time and the title).

I hope there is any solution.

Kind Regards

Chichi

Answer 1

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'
                        }
                    }
                });
            }
        });

Answer 2

Thanks for your reply Jake,

i have tested the qTip plugin as tooltip. But i am looking for a solution in the div container of the eventRenderer. i hope without adaption of the fullcalendar-core.

Kind Regards

Answer 3

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) fuction and add .replace(/<br\s?\/?>/g, '
') to the end of it.

function htmlEscape(s) {
    return s.replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/'/g, '&#039;')
    .replace(/"/g, '&quot;')
    .replace(/\n/g, '<br />')
    .replace(/&lt;br\s?\/?&gt;/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'

Answer 4

Hello Chichi,

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-event-title').append("<br/>" + event.description); 
        } 
    });
}