Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I use multiple sources with the jQuery plugin fullCalendar?

I've got a functional fullCalendar http://arshaw.com/fullcalendar/ working retrieving a single source from Google Calendar for the events like so:

$('#calendar').fullCalendar({

   events: $.fullCalendar.gcalFeed(
      "http://www.google.com/calendar/feeds/etc",   // feed URL
      { className: 'gcal-events' }                  // optional options
   )

     });

My challenge is however to have multiple feeds coming in. The fullCalendar documentation says:

eventSources: Array Similar to the 'events' options, except one may specify multiple sources. For example, one may specify an array of JSON URL’s, an array of custom functions, an array of hardcoded event arrays, or any combination.

But there is no example and so this JSON newbie here is a little bit stuck.

Any ideas on what it would need to use eventSources and an array of the feeds?

like image 729
willdanceforfun Avatar asked Nov 09 '09 23:11

willdanceforfun


2 Answers

Found solution here; http://code.google.com/p/fullcalendar/issues/detail?id=192&q=eventSources

eventSources:
[
    'msCal.txt', // location of Cal JSON script
    'msLogBook.txt', // location of LogBook JSON object
    'msEvents.txt' //location of the Events JSON object
]

Painfully simple in retrospect. The following is working on my test page;

eventSources:
[
    $.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/en.australian%23holiday%40group.v.calendar.google.com/public/basic'),
    $.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic'),
    $.fullCalendar.gcalFeed('http://www.google.com/calendar/feeds/en.indonesian%23holiday%40group.v.calendar.google.com/public/basic')
],  
like image 180
Tyronomo Avatar answered Sep 28 '22 09:09

Tyronomo


I was having the same issue and the idea above worked for me with a slight modification. I needed it to show 5 calendars on a page but only 1 calendar on a different page so I did this.

<?php if (is_page("calendar")):?>
 events:'...google calendar url #1...',
<?php endif; ?>

<?php if (is_page("meeting-schedule")):?>
  eventSources: [
    $.fullCalendar.gcalFeed('...google calendar url #1...'),
    $.fullCalendar.gcalFeed('...google calendar url #2...'),
    $.fullCalendar.gcalFeed('...google calendar url #3...'),
    $.fullCalendar.gcalFeed('...google calendar url #4...'),
    $.fullCalendar.gcalFeed('...google calendar url #5...')
  ],
<?php endif; ?>

Works perfectly!!!

like image 38
Eric Wargo Avatar answered Sep 28 '22 09:09

Eric Wargo