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

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

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

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

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

HTML：

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. 如何使用popover将事件DOM绑定并具有额外数​​据（如description键）？ 我不想只查询DOM来显示标题。

谢谢。

Answer 1

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

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

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

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

别。 向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 。