Multiple eventsources with jquery FullCalendar

Question

I know there are a few examples of how to use multiple feed sources with FullCalendar, ie: Stackoverflow post

Plugin Docs

However, none of them show how to use multiple feed sources with additional ajax info such as type, data, etc.

I am trying to use multiple feed sources but can't get it to work. Here is my code:

eventSources: [
    'json-schedule.php',
    'json-events.php'
],

    type: 'POST',
    data: {
        //  custom_param1: 'something', 
    },
    error: function() {
        alert('there was an error while fetching events!');
    },
    success: function() {
    },

Where does the type, data, error & success parts go with more than one data source? None of the examples I've found show that.

Solution 1

Try this way:

$('#calendar').fullCalendar({
    ...
    eventSources: [
        // your JSON event source
        {
            url: '/myfeed.php', // use the `url` property
            color: 'yellow',    // an option!
            textColor: 'black'  // an option!
        },

        // your ajax event source
        {
            events: function(start, end, callback) {
                $.ajax({
                    url: 'myxmlfeed.php',
                    dataType: 'xml',
                    data: {
                        // our hypothetical feed requires UNIX timestamps
                        start: Math.round(start.getTime() / 1000),
                        end: Math.round(end.getTime() / 1000)
                    },
                    success: function(doc) {
                        var events = [];
                        $(doc).find('event').each(function() {
                        events.push({
                            title: $(this).attr('title'),
                            start: $(this).attr('start') // will be parsed
                        });
                    }
                });
            }
        }
    ],
    ...
});

Solution 2

 eventSources: [
            {
                url: 'json-schedule.php',
                type: 'POST',
                data: {
                    date: start, //data to be sent
                    custom_param2: 'somethingelse'
                },
                error: function() {
                    alert('there was an error while fetching shedule!');
                },
                color: 'yellow',   // a non-ajax option
                textColor: 'black' // a non-ajax option
            },
            {
                url: 'json-events.php',
                type: 'POST',
                /*data: {
                    custom_param1: 'something',
                    custom_param2: 'somethingelse'
                },*/
                error: function () {
                    alert('there was an error while fetching events!');
                },
                color: 'green',   // a non-ajax option
                textColor: 'black' // a non-ajax option
            }
        ],

Solution 3

My approach is bit different to add multiple eventsources but works fine.

        var fcSources = {
        loadEvents: {
            url: "/get-all-events-from-mysql",
            type: "GET",
            color: "#65a9d7",
            textColor: "#3c3d3d",
            cache: true,
            className: "events",
            data:
            {
                 start: "start",
                 end: "end",
                 id: "id",
                 title: "title"

            },
            error: function() {
                console.log("Error in loadEvents: " + data);
            },
        },
        loadEwsEvents: {
            url: "/get-ews-events",
            type: "GET",
            color: "#FF6347",
            textColor: "#000000",
            cache: true,
            editable: false,
            disableDragging: true,
            className: "events",
            data:  {
                start: "start",
                end: "end",
                id: "id",
                title: "title"
            },
            error: function() {
                console.log("Error in loadEWSEvents: " + data);
            },
        }
    };

//In the fullcalendar function add these sources

        eventSources: [
            fcSources.loadEvents,
            fcSources.loadEwsEvents
         ],

Comments

[allicarn]

This example was taken directly from the documentation, here

[Sikandar_ali]

If we want to change eventSources from google calendar like we are using googleCalendarId instead of url then how we can change events on the base of calendarId eventSources: [ { googleCalendarId: '<your Calendar ID>', className: 'gcal-event' // an option! }, { googleCalendarId: '<Second Calendar ID>', className: 'pak-holidays' }, { googleCalendarId: '<Third Calendar ID>', className: 'uae-holidays' }, ]