Javascript 使用fullcalendar.io创建事件后触发一次

代码：

当鼠标悬停在日历中的某个事件上时，我试图使用Bootstrap popover插件创建

popover

。但是，在创建新的事件DOM之后，我找不到将其绑定到新事件DOM的方法

我试图根据文档使用

eventAfterRender

事件，但它似乎是为日历中的所有事件触发的

HTML:

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

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

});

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

CSS:

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

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

});

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

您可以看到登录控制台显示，每次通过单击日期创建新事件时，它都会通过调用

eventAfterRender

循环所有现有事件

因此，问题：

如何在创建新事件后触发一次

如何使用

popover

属性绑定该事件DOM并具有额外数据（如

description

key）？我不想仅仅通过查询DOM来显示标题

---

谢谢。

呈现和创建事件是两个独立的过程

创建或以其他方式添加事件时，实际上是在定义源，而不是在dom中添加元素。源可以是json提要、函数或静态对象，但FC将在每次需要渲染时查看它

每次FC更改其视图时都会进行渲染。它向所有事件源请求它们的事件，然后呈现它们。这是与DOM交互的过程

Q1-创建新事件后如何触发一次

不要。向

eventAfterRender

或

eventRender

添加条件步骤

Q2-如何将该事件DOM与popover进行属性绑定，并拥有额外的数据（如描述码）？我不想仅仅通过查询DOM来显示标题

创建事件时，将其添加为事件源：

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

然后在渲染时为其提供一个popover：

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

这是一张工作票