javascript - FullCalendar 事件点击通过 FancyBox (v2)

标签 javascript fancybox fullcalendar google-calendar-api

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

我见过其他与我类似的问题,例如使用 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 ,我遇到了丢失页面错误,但我相信这可能是由于我在本地而不是在实时服务器上测试这一事实。不过,我可能会弄错。

如果有任何帮助,我将不胜感激。谢谢。

最佳答案

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

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 时遇到困难,我想知道是否可以像我上面使用的那样有一个单独的日期类别(在其当前形式中,它返回为“未定义”)。也许在 FullCalendar 的 future 版本中?

关于javascript - FullCalendar 事件点击通过 FancyBox (v2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8957822/

相关文章:

javascript - Fancybox 模态滚动不起作用

jquery - FancyBox 自定义关闭按钮边框-半径问题

JQuery 无法正确解析 JSON 响应

javascript - 将对象转换为包含对象作为元素 0 的数组

javascript - 错误消息 : this. stopPropagation 不是函数

javascript - 为什么我的 jquery 代码在 IE9 中有效,但在 IE8 中无效?

javascript - 全日历根据外部事件添加颜色

javascript - 图像 slider : Working with the widths

javascript - 将 API 和 Promise 与 Angular-modal-gallery 结合使用

javascript - 如何将毫秒转换为对应的时间?