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

Question

代码:http://jsfiddle.net/AzmJv/1008/

当悬停在日历中的事件上时，我正在尝试使用 Bootstrap Popover 插件创建 popover。但是，在创建新事件 DOM 后，我找不到将 popover() 绑定(bind)到它的方法。

我尝试根据文档使用 eventAfterRender 事件，但它似乎是为日历中的 ALL 事件触发的。

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

您可以在控制台中看到日志显示，每次您通过单击日期创建新事件时，它都会通过调用 eventAfterRender 循环遍历所有现有事件。

所以问题:

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

2. 如何将该事件 DOM 与 popover 属性绑定(bind)并拥有额外数据(如 description 键)？我不想只查询 DOM 来显示标题。

谢谢。

Answer 1

渲染和创建事件是独立的过程。

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

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

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

不要。将条件步骤添加到 eventAfterRender 或 eventRender。

Q2 - 如何将该事件 DOM 与弹出框进行属性绑定(bind)并拥有额外数据(如描述键)？我不想只查询 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');
},

然后在渲染时给它一个弹出框:

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

这是一个有效的 JSFiddle .