Question

我一直试图让FullCalendar事件使用Facebox在点击时弹出信息。将事件放在日历上或者获取需要显示的信息时我没有问题，只是让弹出框工作。

我尝试在包含事件标题的“span”和“a”中添加rel =“facebox”，但似乎都没有影响它。

如果有人之前尝试过这种方法或者知道可能的解决方案，我期待着您的回复。

Answer 1

这可能与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。

Answer 2

我从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 event object页面。如果您使用Google日历扩展程序，可能会有更多内容，包括description和location

将Facebox添加到FullCalendar事件

2 个答案: