从全日历事件中打开花哨的框 - 单击事件将打开先前选择的活动的 URL

Question

此处为首次提问者。我在这里使用了几个不同的线程来构建一个完整的日历，该日历在fancybox中打开事件信息。更具体地说，每一天都有一个链接（结构化为事件），该链接在fancybox中打开当天事件的列表。

我用以下代码构建了日历和fancybox链接：

$('#calendar').fullCalendar({
  height: 550,
  eventClick: function(event) {
    if (event.url) {
      $("a").fancybox({
        'href'  : event.url,
        'width' : '6',
        'height'        : '100%',
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic',
        'type'          : 'iframe'
      });
      return false;
    }
  },
  eventSources: [
    {
      events: [
      <?php
      $query = "SELECT date, COUNT(*) AS num_events FROM events GROUP BY date ORDER BY date";
      $result = mysql_query($query);
      $numRows = mysql_num_rows($result);
      $count = 0;
      while ($row = mysql_fetch_assoc($result))
      {
        $count++;
        $num_events = $row['num_events'];
        if ($num_events == '1') {$num_events .= ' event';}
        else {$num_events .= ' events';}
        $url = 'dayEvents.php?d='.$row['date'];
        $date = $row['date'];
        ?>
        {
        title   : '<?php echo $num_events; ?>',
        start   : '<?php echo $date; ?>',
        url : '<?php echo $url; ?> '
        }<?php if ($count < $numRows) { echo ","; } ?>
      <?php }?>                             
      ],
      color: 'white',
      textColor: '#2287c4'
    }
  ]
})
});

这是我正在经历的场景：

我点击链接A，什么也没发生
我再次点击链接A，粉丝盒打开链接A的url。我退出了幻想盒。我点击链接B，粉丝盒再次打开链接A的url。我退出了幻想盒。我点击链接C，粉丝盒打开链接B的网址。此外，如果我点击日历之外的任何链接，它会打开一个带有链接C url的粉丝盒（直到我点击日历中的某个事件后才会发生这种情况）。

本质上，链接会延迟一次点击，而fancybox会为页面上的任何链接创建一个事件处理程序。有人知道是什么原因造成的吗？我能做些什么来解决它？

谢谢。

Answer 1

当前，每当用户单击某个事件时，您的代码都会在整个页面上的每个"a"元素上放置一个花哨的框，从而导致您看到的奇怪行为。

不要使用"eventClick"回调，而是将您的fancybox init代码放在"eventAfterRender"回调中。顾名思义，此回调是在绘制每个日历事件后调用的。这样，当加载日历时，花式框将被初始化，当用户单击某个事件时，花式盒将准备就绪。

此外，您需要将jquery选择器从$（"a"）.fancybox（…修改为$（"a"，element）.fancybox（…，其中'element'是fullcalendar提供给eventAfterRender回调的参数（请参阅eventAfterRender函数的fullcalendary文档）。这将把选择器限制为刚刚呈现的单个日历事件的div。

编辑在阅读了更多关于fancybox的内容后，我发现你可以直接打开它，而无需先将其连接到<a>要素这可能是一个比我上面建议的要好得多的解决方案，因为除非用户真正点击日历事件，否则你不会初始化任何粉丝盒。因此，在您的完整日历初始化中，只需将您的eventClick替换为以下内容：

eventClick: function(event) {
    if (event.url) {
      $.fancybox({
        'href' : event.url,
        'type' : 'iframe',
         other options as you like...
      });
      return false;
    }
  },