Trigger сразу после того, как событие создается с использованием fullcalendar.io

Question

Код: http://jsfiddle.net/AzmJv/1008/

Я пытаюсь создать popover используя Bootstrap поповер плагин при наведении курсора на событие в календаре. Однако я не могу найти способ привязать 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, чтобы показать заголовок.

Спасибо.

Answer 1

Оказание и создание событий - это отдельные процессы.

Когда вы создаете или иным образом добавляете событие, вы фактически определяете источник , не добавляя элемент в 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'); 
}, 

Затем дать ему поповер всякий раз, когда он визуализируется:

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.