Trigger once after event created using fullcalendar.io

Question

Code: http://jsfiddle.net/AzmJv/1008/

I am trying to create popover using Bootstrap Popover plugin when hover over an event in the calendar. However, I cannot find a way to bind popover() to a new event DOM after it's being created.

I tried to use eventAfterRender event according to the doc, but it seems to be triggered for ALL events in the calendar.

http://fullcalendar.io/docs/event_rendering/

HTML:

<div id='calendar'></div>

JS:

$(document).ready(function () {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2015-02-12',
        selectable: true,
        selectHelper: true,
        select: function (start, end) {
            var title = prompt('Event Title:');
            var eventData;
            if (title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end
                };
                // console.log(eventData);
                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendar').fullCalendar('unselect');
        },
        eventAfterRender: function (event, element, view) {
            console.log('eventAfterRender');
            console.log(event);
            console.log(element);
            console.log(view);
        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [{
            title: 'All Day Event',
            start: '2015-02-01'
        }, {
            title: 'Long Event',
            start: '2015-02-07',
            end: '2015-02-10'
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2015-02-09T16:00:00'
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2015-02-16T16:00:00'
        }, {
            title: 'Conference',
            start: '2015-02-11',
            end: '2015-02-13'
        }, {
            title: 'Meeting',
            start: '2015-02-12T10:30:00',
            end: '2015-02-12T12:30:00'
        }, {
            title: 'Lunch',
            start: '2015-02-12T12:00:00'
        }, {
            title: 'Meeting',
            start: '2015-02-12T14:30:00'
        }, {
            title: 'Happy Hour',
            start: '2015-02-12T17:30:00'
        }, {
            title: 'Dinner',
            start: '2015-02-12T20:00:00'
        }, {
            title: 'Birthday Party',
            start: '2015-02-13T07:00:00'
        }, {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2015-02-28'
        }]
    });

});

CSS:

body {
    margin: 40px 10px;
    padding: 0;
    font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
}
#calendar {
    max-width: 900px;
    margin: 0 auto;
}

You can see the log in Console showing that every time you create a new event by clicking in a date, it loops through all existing events by calling eventAfterRender.

So question:

1. How to trigger once after new event created?

2. How to property bind that event DOM with popover and have extra data (like description key)? I don't want to just query to DOM to show the title.

Thanks.

Answer 1

Rendering and creating events are separate processes.

When you create or otherwise add an event, you are actually defining a source, not adding an element to the dom. The source can be a json feed, function or static object, but FC will look at it every time it needs to render it.

Rendering is done every time FC changes it's view. It asks all the event sources for their events and then renders them. This is the process that interacts with the DOM.

Q1 - How to trigger once after new event created?

Don't. Add conditional steps to the eventAfterRender or eventRender.

Q2 - How to property bind that event DOM with popover and have extra data (like description key)? I don't want to just query to DOM to show the title.

When the event is created, add it as an event source:

select: function (start, end) {
    var title = prompt('Event Title:');
    var eventData;
    if (title) {
        eventData = {
            title: title,
            start: start,
            end: end,
            description: "Some popover text",
            hasPopover: "true" // custom field
        };
        $('#calendar').fullCalendar('addEventSource', { // Add an event source
            events: [eventData]
        }); 
    }
    $('#calendar').fullCalendar('unselect');
},

Then give it a popover whenever it is rendered:

eventAfterRender: function (event, element, view) {
    if(event.hasPopover){ // We can check against this custom attribute
        $(element).data({ // assign data attributes to the event element for popover's use
            content: event.description,
            title:event.title
        }).popover({trigger:"hover"});
    }
}

Here's a working JSFiddle.