使用GCal在Fullcalendar v4中显示事件描述

时间:2018-12-18 00:46:27

标签: javascript fullcalendar gcal

我正在使用FullCalendar v4来显示来自Gcal来源的事件日历。 我需要一个函数,用户可以单击事件并将详细信息附加到下面的div。

我可以成功显示事件的开始日期/时间,结束日期/时间,URL,ID,全天和标题,但是除此之外,我还想显示位置和说明。

例如,如果我使用arg.event.location,则会在div中返回“未定义”。

下面是我用来渲染日历的Javascript:

            document.addEventListener('DOMContentLoaded', function() {
                var calendarEl = document.getElementById('calendar');
                var calendarEvent = document.getElementById('cal-event');
                var calendar = new FullCalendar.Calendar(calendarEl, {

                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,listYear'
                    },

                    displayEventTime: false, // don't show the time column in list view
                    googleCalendarApiKey: 'AIza_______xxxxxxxxxx',

                    eventSources: [
                                                                                {
                            googleCalendarId: 'sxxxxxxxxx@xxxxxx.com',
                            className: 'layers-widget-calendar-3-55'
                        },
                                                {
                            googleCalendarId: 'en.usa#holiday@group.v.calendar.google.com',
                            className: 'layers-widget-calendar-3-734'
                        },
                                                                ],

                    eventClick: function(arg) {
                        //window.open(arg.event.url, 'gcalevent', 'width=700,height=600');

                        var gcalEventID = arg.event.id;
                        var gcalEventTitle = arg.event.title;
                        var gcalEventLocation = arg.event.location;
                        var gcalEventURL = arg.event.url;
                        var gcalEventStart = arg.event.start;
                        var gcalEventEnd = arg.event.end;
                        var gcalEventAllDay = arg.event.allDay; // returns true or false

                        arg.jsEvent.preventDefault() // don't navigate in main tab

                        calendarEvent.append(gcalEventLocation);
                    },
                    loading: function(bool) {
                        document.getElementById('loading').style.display =
                            bool ? 'block' : 'none';
                    }
                });
                calendar.render();
            });

为了获取位置和描述,我在这里做错什么了吗?

0 个答案:

没有答案
相关问题