Question

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

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

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来循环显示所有现有事件。

enter image description here

所以问题：

创建新事件后如何触发一次？
如何将该事件DOM与popover绑定并具有额外数据（如description键）？我不想只查询DOM来显示标题。

感谢。

Answer 1

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

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

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

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

唐＆＃39;吨。向eventAfterRender或eventRender添加条件步骤。

Q2 - 如何使用popover将该事件DOM绑定并具有额外数据（如描述键）？我不想只查询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"});
    }
}

这是一个有效的JSFiddle。

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

1 个答案: