Dalvir Singh
Dalvir Singh

Reputation: 433

How to show a description of Events in fullcalendar

How can I show a description of Events in fullcalendar?

I have events that have a title and a description.

So how can I show the description?

Upvotes: 5

Views: 23275

Answers (2)

Shanka SMS
Shanka SMS

Reputation: 654

When you add the title and description it will concatenate.

Using the below code, you can concatenate with the title:

eventRender: function (event, element, view) {
    element.find('.fc-title').append('<div class="hr-line-solid-no-margin"></div><span style="font-size: 10px">' + event.description + '</span></div>');
},

Upvotes: 5

Ramdrupal7
Ramdrupal7

Reputation: 69

Here is the working jQuery or JavaScript code.

I love Bootbox.js for showing message so I implemented that also here:

$(document).ready(function() {

    var today_date = moment().format('YYYY-MM-DD');
    console.log(today_date);

    // $('#calendar').fullCalendar('gotoDate', today_date);
    $('#calendar').fullCalendar({
        theme: false,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek'
            // right: 'month,basicWeek,basicDay'
        },
        // header: { center: 'month,agendaWeek' }, // Buttons for switching between views
        defaultDate: today_date,
        businessHours:
        {
            rendering: 'inverse-background',
            dow: [0,1]
        },
        editable: false,
        eventLimit: true, // Allow "more" link when too many events
        events: myevents,
                eventRender: function (event, element) {
                    element.attr('href', 'javascript:void(0);');
                    element.click(function() {
                        bootbox.alert({
                            message: 'Description : '+event.description,
                            title: event.title,
                        });
                    });
                }

    });
});

Upvotes: 2

Related Questions