将 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

这可能与 Facebook 的工作方式有关。我认为它可能只在页面的初始加载时运行 - 因此当您将这些添加到新元素时，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.facebox”来代替“element.qTip”。您可能还需要设置 href。