Добавить Facebox к событиям FullCalendar

Question

Я пытался заставить события FullCalendar использовать Facebox для всплывающей информации, когда они нажимаются. У меня нет проблем с тем, чтобы помещать события в календарь или получать информацию, которая должна отображаться, это просто заставляет всплывающее окно работать.

Я попытался добавить rel = "facebox" к обоим "span" и к "a", которые обертывают заголовок события, но, похоже, ни один из них не влияет на него.

Если кто-то пробовал это раньше или знает возможное решение, я с нетерпением жду вашего ответа.

Answer 1

Я скопировал и расширил пример со страницы документа fullCalendar eventClick :

$('#calendar').fullCalendar({
 eventClick: function( calEvent, jsEvent, view ) {
  var txt = 'Event: ' + calEvent.title + '<br>' +
            'Event Start: ' + calEvent.start + '<br>' +
            'Event End: ' + calEvent.end + '<br>' +
            'Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY + '<br>' +
            'View: ' + view.name;
  // for an image use: jQuery.facebox({ image: 'dude.jpg' })
  // for ajax page use: jQuery.facebox({ ajax: 'remote.html' })
  jQuery.facebox(txt);
 }
});

О, и если вы хотите получить любой из других calEvent объектов, посмотрите настраница события fullCalendar .Может быть больше, если вы используете расширение календаря Google, в том числе description и location

Answer 2

Возможно, это связано с тем, как работает facebox. Я думаю, что он может работать только при начальной загрузке страницы - поэтому, когда вы добавляете их к новым элементам, код facebox уже запущен, а новые элементы не распознаются.

Если вы используете это для запуска facebox:

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox() 
})

Тогда это так. Вы должны добавить что-то в метод eventRender, чтобы при отображении событий вы вызывали метод facebox, который создает их как элементы facebox.

С http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/:

eventRender: function(event, element) {
    element.qtip({
        content: event.description
    });
}

Но вместо «element.qTip» вы бы использовали «element.facebox» с правильными аргументами. Возможно, вам также понадобится установить href.