こんにちはSI部の加藤(祐)です。
前回は「fullcalendar」の表記の設定までと簡単な導入部分を紹介させていただきましたが、
今回はデザインの指定やgoogleカレンダーとの連携について内容を紹介していきたいと思います。
fullcalendarのデザインのカスタマイズ
fullcalendarのデザインを変更するにはfullcalendarのプラグインに含まれている「fullcalendar.css」を変更します。
前回作成したfullcalendarのサンプルでは以下のファイルになります。
「fullcalendar.css」ではヘッダーやコンテンツ（カレンダー部分）などの部品ごとに分かれて定義されています。
各部品はコメントで分かれているので変更したい箇所のcssを適宜変更してください。
（コメントがない部分は全体の定義になります。）
ここではそれぞれの設定の説明は省略させていただきますが例としていくつか挙げておきます。
例１） fullcalendar全体の文字を変更する
fullcalendar全体の変更になるのでコメントの無い以下の部分の定義を変更することで文字サイズを変えることができます。
例２） fullcalendarセルの囲み線を変更する
fullcalendarセルの変更になるのでセルの定義しているコメントの以下の部分の定義を変更することで囲み線を変更できます。
Googleカレンダーとの連携ライブラリ
fullcalendarにはgoogleカレンダーとの連携を行うライブラリも提供されている為、
googleカレンダーで登録した予定の取り込みを容易に行うことができます。
提供されているライブラリーは以下になります。
Googleカレンダーとの連携手順
１．取り込みたいGoogleカレンダーの設定画面を開きます。
２．設定画面のカレンダーリンクをクリックします。
３．取り込みたいカレンダーの共有設定をクリックします。
４．カレンダー情報リンクをクリックします。
５．限定公開URLのxmlボタンをクリックし、URLを取得します。
６．５で取得で取得したURLを前回作成した「sample.html」に以下の記述を追加します。
※ googleカレンダーとの連携ライブラリーはインポートしてください。正常にインポートできていれば意識せずに処理されます。
以上が連携手順となります。
実際に連携が成功すると以下のように取り込まれます。
Googlecalendar画面
fullcalendar画面
最後に
今回はデフォルトデザインカスタマイズ方法とgoogleカレンダーとの連携方法を紹介させていただきました。
次回はイベント登録画面の作成と登録などもう少し突っ込んだ内容を紹介していきたいと思います。
ご一読頂き有り難うございました。
