Display more Text in fullcalendar

Question

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).

score 133 · Answer 1 · edited Feb 14 '20 at 16:36

133

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

edited Feb 14 '20 at 16:36

masrlinu

103
1
14

answered Aug 08 '10 at 09:44

Eureka

1,442
2
9
7

8

adding to that, instead of `append` you could use `after` if you want to create a new element outside ``. I have also aded a conditional statement so I don't get any *Undefined* outputs: `if (event.description) { element.find('.fc-event-title').after("" + event.description + ""); }` – pax Jan 13 '14 at 09:36
5

Note that the class name has been changed by fullCalendar and so instead of `.find('.fc-event-title')` use `.find('.fc-title')` now! – Michbeckable Nov 12 '14 at 09:44

score 38 · Accepted Answer · edited Sep 13 '13 at 12:29

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

Hello I want to know one thing in full calendar can we show title something like https://www.screencast.com/t/iOSPV822VD8Y this kind of things can we do it. — Denis Bhojvani, Dec 18 '17 at 13:30
With the major caveat that this doesn't typically work well outside of desktop context. (I actually do use this solution as I find it to be good enough). — karns, Jun 06 '22 at 19:31

score 7 · Answer 3 · edited Dec 13 '13 at 22:33

7

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, '&amp;')
    .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'

edited Dec 13 '13 at 22:33

BenMorel

34,448
50
182
322

answered Aug 05 '10 at 13:36

Jake1164

12,291
6
47
64

this is great, i think it's a good workaround for me. Thanks you Jake – chichi Aug 06 '10 at 06:01
@Eureka's answer is much more general than this one and won't get you into trouble trying to keep your changes to fullcalendar.js in sync with new features and bugfixes released after you make the change. – Tom Sep 30 '10 at 03:21
2

I agree in that I dont prefer to modify the source, but sometimes its a cleaner fix and fullcalendar is not exactly a fast moving project. – Jake1164 Oct 01 '10 at 12:50
@Tom what about the DB field's data that has HTML tags coming throgh. This solution can work in the case. – Avnish Tiwary Apr 10 '20 at 15:38

score 6 · Answer 4 · answered Jan 19 '16 at 14:11

6

as a possible solution: Add some extra more content to the title. Overwrite this css style:

 .fc-day-grid-event .fc-content {
   white-space: normal; 
}

answered Jan 19 '16 at 14:11

DolceVita

2,090
1
23
35

1

This is the best answer! Thanks @DolceVita – vhugo Aug 28 '19 at 19:19

score 6 · Answer 5 · answered May 09 '19 at 21:37

I needed the ability to display quite a bit of info (without a tooltip) and it turned out quite nice. I used FullCalendars title prop to store all my HTML. The only thing you have to do to ensure it works after render is to parse the title fields HTML.

// `data` ismy JSON object.
$.each(data, function(index, value) {
  value.title = '<div class="title">' + value.title + '</div>';
  value.title += '<div class="deets"><span class="time"><img src="/themes/custom/bp/images/clock.svg">' + value.start_time + ' - ' + value.end_time + '</span>';
  value.title += '<span class="location"><img src="/themes/custom/bp/images/pin.svg">' + value.location + '</span></div>';
  value.title += '<div class="learn-more">LEARN MORE <span class="arrow"></span></span>';
});

// Initialize the calendar object.
calendar = new FullCalendar.Calendar(cal, {
  events: data,
  plugins: ['dayGrid'],
  eventRender: function(event) {
    // This is required to parse the HTML.
    const title = $(event.el).find('.fc-title');
    title.html(title.text());
  }
});
calendar.render();

I would have used template literals, but had to support IE11

you should probably note that this applies to fullCalendar 4, whereas the original question was about earlier versions, which were implemented as a jQuery plugin. — ADyson, May 13 '19 at 20:24

score 5 · Answer 6 · edited Sep 14 '14 at 07:06

Here's my code for popup using qTip2 and eventMouseover:

$(document).ready(function() {
    // Setup FullCalendar
    // Setup FullCalendar
    (function() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var day=date.toLocaleDateString(); 

        var tooltip = $('<div/>').qtip({
            id: 'fullcalendar',
            prerender: true,
            content: {
                text: ' ',
                title: {
                    button: true
                }
            },
            position: {
                my: 'bottom center',
                at: 'top center',
                target: 'mouse',
                viewport: $('#fullcalendar'),
                adjust: {
                    mouse: false,
                    scroll: false
                }
            },
            show: false,
            hide: false,
            style: 'qtip-light'
        }).qtip('api');

        $('#fullcalendar').fullCalendar({
            editable: true,
             disableDragging: true,
            height: 600,
            header: {
                left: 'title',
                center: '',
                right: 'today prev,next'
            },

            dayClick: function() { tooltip.hide() },
            eventResizeStart: function() { tooltip.hide() },
            eventDragStart: function() { tooltip.hide() },
            viewDisplay: function() { tooltip.hide() },
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(2014, 3, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: 'Spring Membership Conference',
                    start: new Date(y, m, d+6, 7,0),
                    end: new Date(y, m, d+6, 13,0),
                    allDay: false,
                    description:'save the date! Join us for our Annual Membership Conference. Breakfast will be served beginning at 7:30 a.m. Featuring The EFEC Belief System & Our Pledge lunch'
                },
                {
                    title: 'Birthday Party',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                }
            ],
            eventMouseover : function(data, event, view) {
                var content = 
                '<p>'+data.description +'<p>'+
                '<h3>'+data.title+'</h3>' + 
                    '<p><b>Start:</b> '+data.start+'<br />' + 
                    (data.end && '<p><b>End:</b> '+data.end+'</p>' || '');

                tooltip.set({
                    'content.text': content
                })
                .reposition(event).show(event);
            },
        });
    }());
});

score 3 · Answer 7 · answered Jul 20 '14 at 16:49

3

For some reason, I have to use

element.find('.fc-event-inner').empty();

to make it work, i guess i'm in day view.

answered Jul 20 '14 at 16:49

windmaomao

7,120
2
32
36

score 1 · Answer 8 · answered Sep 07 '13 at 22:11

Well i found a simpler solution for me:

I changed fullcalendar.css

and added the following:

float: left;
clear: none;
margin-right: 10px;

Resulting in:

.fc-event-time,
.fc-event-title {
    padding: 0 1px;
    float: left;
    clear: none;
    margin-right: 10px;
}

now it only wraps when it needs to.

score 0 · Answer 9 · answered Feb 25 '16 at 13:16

0

I would recommend the use of the eventAfterRender callback instead of eventRender. Indeed if you use eventRender you might jeopardize the correct display of the events, in coffee script, it something like :

$("#calendar").fullCalendar
    eventAfterRender: (event, element) ->
        element.find('.fc-title').after("<span>"+event.description+"</span>")

answered Feb 25 '16 at 13:16

Sylvain Martin Saint Léon

732
8
14

kids nowadays with their coffeescript /grumble – a20 Jun 27 '16 at 09:22
2

To all 'kids' using coffeescript. Make sure to put `return` at the end of the `eventRender`otherwise it will break whole render part. – undefinedman Sep 08 '16 at 22:35

Display more Text in fullcalendar

9 Answers9

Linked