FullCalendarの導入からカレンダー毎の色指定まで

投稿日 2012/08/29 更新日 2020/09/01

2012年7月の拙サイト改装2回目時に既に導入している「FullCalendar」について、導入からGoogleカレンダーの複数読込み、カレンダー毎の色指定までをおさらい。基本的な流れはFullCalendarサイトの解説を踏襲。

デフォルト状態

下記改修を施した後

1. ダウンロード

Downloadページから「fullcalendar-1.5.3.zip」をダウンロードして解凍後、自サーバーへアップ。

2. fullcalendarのCSSとJSを読込む

<head>タグ内に以下を記述。

<link rel="stylesheet" type="text/css" href="fullcalendar.css" />
<script type="text/javascript" src="fullcalendar.js"></script>
<script type="text/javascript" src="fullcalendar.min.js"></script>
<script type="text/javascript" src="gcal.js"></script>

赤字部分は各自の階層に合うように適宜変更。

3. FullCalendarにGoogleカレンダーを読込むためのjQueryを`<head>`タグ内に記述

必ず<script>タグで囲むこと。

<script type="text/javascript">
$(document).ready(function() {
   $('#calendar').fullCalendar({
        // あとでここに色々追記
    })
});
</script>

4. `<body>`タグ内のFullCalendarを挿入したい箇所にID属性を挿入

<div id='calendar'></div>

を追記。

以上、2.〜4.はBasic Usageページを参照。
次に、FullCalendarにGoogleカレンダーを読込ませる。

5. Googleカレンダーの「設定」より、読込ませるGoogleカレンダーを「一般公開」設定

6. Googleカレンダーの「設定」より、必要分のGoogleカレンダーのアドレスを「XML」ボタンより取得

7. 上記3.の「// あとでここに色々追記」の箇所にGoogleカレンダーのアドレスを記述

<script type="text/javascript">
$(document).ready(function() {
   $('#calendar').fullCalendar({
        eventSources: [
             {
                  url: "your_feed_url1",
                  className: "event1"
             },
             {
                  url: "your_feed_url2",
                  className: "event2"
             }
        ]
    })
});
</script>

複数カレンダーの読込みでは「eventSources」というoptionを使い、その中に複数のEvent Sourceを指定する場合は上記のように括弧とコンマを追加する。コンマはよく追加し忘れるので特に注意。
「className」は今回別段必要ではないが、アドレス識別のため付けた。
（7.はGoogle Calendarページを参照。）

以上で、Googleカレンダーの読込みが完了してFullCalendarに反映される。
しかし、複数のカレンダーを読込んでいるのに色が一緒でみにくい、各々のカレンダー色を変更したい、と調べたらEvent Sourceで色分けできることが判明。

8. 上記7.のコードに「backgroundColor」を追加し各々の色を指定

<script type="text/javascript">
$(document).ready(function() {
   $('#calendar').fullCalendar({
        eventSources: [
             {
                  url: "your_feed_url1",
                  className: "event1",
                  backgroundColor: "#F3F5F7"
             },
             {
                  url: "your_feed_url2",
                  className: "event2",
                  backgroundColor: "#98A4AE"
             }
        ]
    })
});
</script>

コンマを追加し忘れないように。

9. 他に、境界線色用の「borderColor」や文字色用の「textColor」などもあるのでこれらも指定

<script type="text/javascript">
$(document).ready(function() {
   $('#calendar').fullCalendar({
        eventSources: [
             {
                  url: "your_feed_url1",
                  className: "event1",
                  backgroundColor: "#F3F5F7",
                  borderColor: "#BAC2C9",
                  textColor: "#3E4051"
             },
             {
                  url: "your_feed_url2",
                  className: "event2",
                  backgroundColor: "#98A4AE"
             }
        ]
    })
});
</script>

（8.〜9.はEvent Source Objectページを参照。）
以上で複数カレンダーを色分けして表示できた。

最後に

FullCalendarで表示される時刻表記が「12p」や「10:30a」と判りにくいので、これも変更する（なぜにこのフォーマットがデフォルト？！）。FullCalendarの時刻表記のフォーマットはformatDateページで参照し、「時間は24時間制で1桁のとき10の位に0は不要、分は常に2桁」が希望なので、フォーマットは「H:mm」。ということで、時刻表記を「timeFormat」を用いて変更するので、上記9.に追加。

<script type="text/javascript">
$(document).ready(function() {
   $('#calendar').fullCalendar({
        eventSources: [
             {
                  url: "your_feed_url1",
                  className: "event1",
                  backgroundColor: "#F3F5F7",
                  borderColor: "#BAC2C9",
                  textColor: "#3E4051"
             },
             {
                  url: "your_feed_url2",
                  className: "event2",
                  backgroundColor: "#98A4AE"
             }
        ],
        timeFormat: "H:mm"
    })
});
</script>

しつこいけど、ホンマにコンマを追加し忘れるなオレ。
（以上は timeFormatページを参照。）

このブログを検索

つくりてのざれごと