javascript - FullCalendar:使用 Google 日历事件的位置属性

标签 javascript jquery calendar fullcalendar google-calendar-api

我设置了 FullCalendar (v3.8.0) 以从 Google 日历中提取事件数据,使用 qTip2 显示事件信息。这很好用。

我现在正在尝试显示事件的位置属性。遗憾的是,我似乎无法弄清楚如何让 FullCalendar 在事件中保存来自 Google 日历的信息

<head>
    <meta charset="utf-8">

    <title>Test</title>
    <meta name="description" content="Test">
    <meta name="author" content="Test">

    <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
    <link rel='stylesheet' href='qtip/jquery.qtip.min.css' />

    <script src='lib/jquery.min.js'></script>
    <script src='qtip/jquery.qtip.min.js'></script>     
    <script src='lib/moment.js'></script>               
    <script src='fullcalendar/fullcalendar.js'></script>
    <script type='text/javascript' src='fullcalendar/gcal.js'></script>
</head>

<body>
    <script type='text/javascript'>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            googleCalendarApiKey: '<<hidden>>',
            events: {
                googleCalendarId: '<<hidden>>'
            },
            header: {
                left:   'title',
                center: 'listWeek, agendaWeek, month',
                right:  'prev,next'
            },
            weekends: false,
            eventRender: function(event, element) {
                element.qtip({
                    content: event.description,
                    title: event.title,
                    position: {
                        my: 'center',   //Ecke des Tooltips
                        at: 'center',   //Position auf der Seite (auch Target möchlich)
                        target: $(window)
                    },
                    show: 'click'
                });
            },
            eventClick: function(event) {
                if (event.url) {
                    return false;
                }                   
            }               
        });
    });
    </script>

    <div id='calendar'></div>
</body>

我尝试将 location 属性添加到 EventDef.defineStandardProps,但是这个应用程序没有任何效果。

EventDef.defineStandardProps({
    // not automatically assigned (`false`)
    _id: false,
    id: false,
    className: false,
    source: false,
    // automatically assigned (`true`)
    title: true,
    url: false,
    rendering: true,
    constraint: true,
    overlap: true,
    editable: true,
    startEditable: true,
    durationEditable: true,
    color: true,
    backgroundColor: true,
    borderColor: true,
    textColor: true,
    location: true
});

这也在 "fullcalendar jQuery - Possible to retrieve description from Google Calendar events?" 中讨论过,但提供的解决方案似乎已过时且不再适用。 关于此主题的所有其他主题都没有或没有结论性答案。

我可以采取哪些步骤才能使用事件地点?

最佳答案

在 eventRender 回调 ( https://fullcalendar.io/docs/event_rendering/eventRender/) 期间,您应该能够访问 event.location,假设 Google 已在您收到的 JSON 中为您提供该字段。您可以通过将行 console.log(JSON.stringify(event)); 插入您的 eventRender 代码来检查事件的内容,以记录您可用的事件属性。

如果数据源提供自定义属性,FullCalendar 会愉快地保留事件对象的自定义属性。获得该数据后,您可以随意将其插入到事件的 HTML 中。

我不知道你在这个过程中的什么地方试图将东西添加到事件标准属性中,但无论如何这没有任何意义 - 它只会预定义一个空属性,它不会导致它实际上是填充任何东西。

关于javascript - FullCalendar:使用 Google 日历事件的位置属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48235098/

相关文章:

Java SimpleDateFormat.format(date) 配置

javascript - 使用 AngularJS 使用 Java REST 服务(更新、删除问题)

javascript - 如何在没有模拟器的情况下使用 firebase?

javascript - 如何从自定义的 forEach 函数中获取返回值以在回调中使用?

javascript - 将图像传输到滚动上的另一个 div;

javascript - 如何通过在其他元素上调用上下文来在输入类型 "click"上调用 "file"?

python - 在 wx.calendar CalendarCtrl 小部件上设置日期

java - 如何从 Java 中的 Date 对象中减去 X 天?

javascript - 如何打印 console.log 中的最后一个数组项?

javascript - 如何停止 javascript++ 或 - - 条件