2

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

popover将鼠标悬停在日历中的事件上时，我正在尝试使用 Bootstrap Popover 插件进行创建。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。

在此处输入图像描述

所以问题：

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

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

谢谢。

4

1 回答 1

1

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

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

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

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

不。将条件步骤添加到eventAfterRenderor 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');
},

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

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。

于 2015-02-18T15:07:52.713 回答