CodeNameGrant
CodeNameGrant

Reputation: 126

Displaying Google Calendar Events and Custom Events in fullCalendar

Im using the amazing FullCalendar JQuery plugin and need to display a Google Calendar Events aswell as my own custom events. Code Below.

$('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: true,
            events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic',
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                }
            ]
        });
    });

Now Im aware that I cannot have two events attributes, but i need the data from both sources displayed. How can i go about this?

Thanks in advance, Grant

Upvotes: 0

Views: 1286

Answers (1)

CodeNameGrant
CodeNameGrant

Reputation: 126

Thanks for Reading, but I've found the solution. All I had to do was Add an event source after initializing my Calendar. Code below.

$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        theme: true,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            }
        ]
    });

    $('#calendar').fullCalendar('addEventSource', 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic');
});

Upvotes: 4

Related Questions