从Google日历和数据库中获取事件以完整日历显示

时间:2019-06-02 12:06:35

标签: javascript json ajax fullcalendar fullcalendar-3

我正在尝试显示来自实体数据库和公共Google日历的事件。

我已经尝试了堆栈溢出中显示的所有选项,但均无济于事。我可以使用google calendar example (github)上的示例将事件加载到不同页面上的两个不同日历上 和database example (youtube)

但是,我无法让它们在单个html页面上的相同日历上加载。我在2017年上使用MVC5应用程序。 我只是一个业余爱好者,而不是一名合格的编码员,因此非常感谢您的帮助。

这是我如何从数据库中获取事件:

$(document).ready(function () {
    var events = [];
    var selectedEvent = null;
    FetchEventAndRenderCalendar();
    function FetchEventAndRenderCalendar() {
        events = [];
        $.ajax({
            type: "GET",
            url: "/home/ListEvents",
            success: function (data) {
                $.each(data, function (i, v) {
                    events.push({
                        eventID: v.EventID,
                        title: v.Subject,
                        description: v.Description,
                        start: moment(v.Start),
                        end: v.End != null ? moment(v.End) : null,
                        color: v.ThemeColor,
                        allDay: v.IsFullDay
                    });
                })

                GenerateCalender(events);
            },
            error: function (error) {
                alert('failed');
            }
        })
    }

这是我如何从数据库和Google(上述代码的以下内容)获取事件:

function GenerateCalender(events) {
    $('#calender').fullCalendar('destroy');
    $('#calender').fullCalendar({
        contentHeight: 400,
        defaultDate: new Date(),
        timeFormat: 'h(:mm)a',
        plugins: ['interaction', 'dayGrid', 'list', 'googleCalendarPlugin'],
        header: {
            left: 'prevYear,prev,next,nextYear today',
            center: 'title',
            right: 'listMonth,month,basicWeek,basicDay'
        },
        eventLimit: true,
        eventColor: '#378006',
        eventRender: function (event, element, view) {
            element.find('#txtSubject');
            element.find('#txtSubject');
            element.find('.fc-list-item-title');
            element.find('.fc-list-item-title');
            //return ['all', event.conferencier].indexOf($('#filter-conferencier').val()) >= 0;
            return ['All events', event.title].indexOf($('#numero').val()) >= 0 || ['', event.color].indexOf($('#color').val()) >= 0;
        },
        googleCalendarApiKey: '*************************',
        eventSources: [
            events,
            {
                googleCalendarId:'blah...blah' 
            }
        ],
        eventClick: ETC ETC
    });

我还尝试添加这些行:

    $('#calendar').fullCalendar('addEventSource', 'https://calendar.google.com/calendar/embed?src=BLAH.......BLAH');
    }
})

0 个答案:

没有答案