FullCalendar活动点击FancyBox(v2)

时间:2012-01-22 00:00:06

标签: javascript fancybox fullcalendar google-calendar-api

我在整个项目中使用FancyBox,并希望将FancyBox实现为FullCalendar脚本。基本上,我想弄清楚如何将事件的描述传递给FancyBox弹出窗口。我使用了11种不同的Google日历Feed。我担心这可能会阻止这种情况发生。如果是这种情况,我可能会完全放弃这个想法。

我已经看到了与我类似的其他问题,例如使用gcal.js文件的events.push部分,但我似乎无法弄清楚如何制作其他人的问题'解决方案工作我所看到的其他一些问题是:

有没有办法将gcal.js文件的events.push部分传递给FancyBox弹出窗口?或者是否有其他方法将事件描述传递给FancyBox?我应该考虑将我的Google日历源转换为JSON字符串,而是使用PHP / MySQL来创建和存储事件吗?我忽略了一些明显的东西吗?

以下是我用来在eventClick上触发FancyBox的当前脚本。

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

目前的形式,显然没有提及events.push或类似的东西。它适用于启动FancyBox,但不是很多。像我现在一样使用event.url,我得到了一个缺页错误,但我相信这可能是因为我在本地测试这个而不是在实时服务器上测试。然而,我可能会弄错。

我将不胜感激任何帮助。谢谢。

2 个答案:

答案 0 :(得分:4)

所以,在前一天晚上发布我的问题后,我自然找到了一个解决方案。对于有这个问题的其他人来说,这就是我所做的:

eventClick: function(event) {
    if (event.url) {


        var fancyContent = ('<div class="header">Event Details</div> <div id="prac" class="pracform"> <label><b>Event: </b></label>' + event.title + '<br>' + '<label><b>Date: </b></label>' + event.date + '<br>' + '<label><b>Start Time: </b></label>' + event.start + '<br>' + '<label><b>End Time: </b></label>' + event.end + '<br>' + '<label><b>Description: </b></label>' + '<div class="event_desc">' + event.description + '</div>' + '<br>' + '<label><b>Location: </b></label><a href=' + event.url + '>' + event.location + '</a>' + '<br>' + '</div>');

        $.fancybox({
            'content': fancyContent
        })
        return false;
    }
}

然而,我在编辑gcal.js文件时难以将ISO8601设置的时间更改为h:mmTT,我想知道是否可以将单独的日期类别设置为我已在上面使用过(以当前形式返回&#34; undefined&#34;)。也许在将来的FullCalendar版本中发布?

答案 1 :(得分:0)

我遇到了同样的问题,并使用fullcalendar文档中的eventClick示例,我做了以下事情:

eventClick: function(event) {
    if (event.url) {
    $("a").fancybox(event.url);
        return false;
    }
}

不确定这是否会有所帮助,但它对我有用。我对此解决方案唯一的问题是,在第一次单击时,不会调用fancybox。在第二次点击和随后的任何点击中,它都可以正常工作。