full calendar, events holidays and own events

问题

I want to mix my own events and retrieve from google calendars the holidays for a given country. I have my API key etc.. I get my data from ajax calls, and build my events as

     my_events.push({title:name,
                start: moment(date_begin),
                end:moment(date_end)
          });

works perfectly. Now I want the holidays. In the demos of full calendar in github, i see the following code:

     googleCalendarApiKey: 'xxx',
     // US Holidays
     events: 'usa__en@holiday.calendar.google.com',

It works (with my own key of course).

But now, I cannot understand how see both my_events and the holidays. I tried my_events.push({'usa__en@holiday.calendar.google.com'}) does not work.

How do I do that ?

Another question is, I am not in USA, i would like to get European countries holidays. Does anybody know if there is a similar address for france, italy etc ? I tried fr, fra__fr, it, ita__it etc but always got a "notFound"

Thanks for any pointer and explanation

回答1:

You can add multiple event sources with fullcalendar - have your event source and then add one for the holiday calendar(s)

Here's a fiddle for the below code (you have to have an API key!) https://jsfiddle.net/5x2dL5Ls/

/* Modified from http://fullcalendar.io/js/fullcalendar-2.6.0/demos/gcal.html */

$('#calendar').fullCalendar({

  // THIS KEY WON'T WORK IN PRODUCTION!!!
  // To make your own Google API key, follow the directions here:
  // http://fullcalendar.io/docs/google_calendar/
  googleCalendarApiKey: 'PUT_YOUR_API_KEY_HERE',

/* For demo purposes, our hard-coded event source information */
  defaultDay: '2016-02-01',
  events: [{
    title: 'This is a non-google-holiday event',
    start: '2016-02-16',
    end:   '2016-02-20'
  }],
/* For demo purposes */

  eventClick: function(event) {
    // opens events in a popup window
    window.open(event.url, 'gcalevent', 'width=700,height=600');
    return false;
  },

  loading: function(bool) {
    $('#loading').toggle(bool);
  }

});

$('#addSource').click(function() {
  var source = $('#holidayCalendar').val();
  // $('#calendar').fullCalendar('removeEventSource', source);
  $('#calendar').fullCalendar('addEventSource', source);
});

$('#removeSource').click(function() {
  var source = $('#holidayCalendar').val();
  $('#calendar').fullCalendar('removeEventSource', source);
});

I didn't find good documentation for a complete list of holiday sources, so I made one by scraping data from "Browse Interesting Calendars" link on calendar.google.com that looked like this

[/* ... */,    {
    "title":"Holidays in United States",
    "type":"calendar",
    "did":"ZW4udXNhI2hvbGlkYXlAZ3JvdXAudi5jYWxlbmRhci5nb29nbGUuY29t",
    "country":"US"
}, /* ... */]

Then appending the "did" from that data onto this url, example USA holidays

https://calendar.google.com/calendar/embed?src=ZW4udXNhI2hvbGlkYXlAZ3JvdXAudi5jYWxlbmRhci5nb29nbGUuY29t

and scraping that page for "cids":{"the_creator_is_in_here": and extracting it... Hackish, but got a list of Calendars.

For languages, you can try changing the 'en.' to another language prefix.

For example "Holidays in Japan" can be rendered in English or Japanese:

en.japanese#holiday@group.v.calendar.google.com
ja.japanese#holiday@group.v.calendar.google.com

来源：https://stackoverflow.com/questions/35440015/full-calendar-events-holidays-and-own-events

标签

jquery

fullcalendar