jQuery カレンダープラグイン FullCalendar ～その２ 日本の祝日を表示させる～

Google Calendar から祝日を取得し表示させます。

基本編

デモの gcal.html とほぼ同じです。
違いは、デモではUSの祝日だったのでJPに変更している程度です、

Google Calendar API Key を取得する

別の記事を作成しました。下記リンク先をご確認下さい。

Google Calendar の API Key を取得する

Google Calendar から祝日を取得し表示する

gcal.js をインクルードし、fullCalendar関数コール時にいくつか指定します。

HTML

<script src='gcal.min.js'></script>

JavaScript

$('#calendar').fullCalendar({
  // 取得した API Key
  googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

  // JP Holidays
  events: 'japanese__ja@holiday.calendar.google.com'
  // US Holidays
  //events: 'en.usa#holiday@group.v.calendar.google.com'
});

GitHub Pages：サンプル public_holiday_0.html

実践編

Google Calendar とイベントを組み合わせて表示する

events に直接 カレンダーのURLを指定していましたが、eventSourcesで指定する事でevents と組み合わせる事が可能です。

JavaScript

$('#calendar').fullCalendar({
  eventSources : [
    {
      googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      // googleCalendarId でも url でもどちらでも動作する
      googleCalendarId: 'japanese__ja@holiday.calendar.google.com'
    }
  ],
  events : [
    ...
  ]
});

GitHub Pages：サンプル public_holiday_1.html

祝日イベントを表示させずに祝日の背景色を変更する

Event Object の renderingを使用する。

Event Object
https://fullcalendar.io/docs/event-object
Background Events
https://fullcalendar.io/docs/background-events

$('#calendar').fullCalendar({
  eventSources : [
    {
      googleCalendarApiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      googleCalendarId: 'japanese__ja@holiday.calendar.google.com'

      rendering: 'background',
      color:"#ffd0d0"
    }
  ],
  events : [
    ...
  ]
});

GitHub Pages：サンプル public_holiday_2.html