試行錯誤してみた。 プログラミングに関する試行錯誤の記録を残します。

【JavaScript】FullCalendarを使う時に設定する3つのこと

【JavaScript】FullCalendarを使う時に設定する3つのこと
                 
最終更新日から90日以上経過しています。

JavaScriptでカレンダーを表示する時に非常に便利なライブラリであるFullCalendarですが、ただ導入するだけだと少し物足りない部分があります。

 

物足りない部分とは、主に休日の背景色設定、祝日の設定などなど・・・。（逆に言えば初期状態では最低限のカレンダー表示のみ行われる為、そこそこ自由にカスタマイズできる）

 

今回は上記のような最低限設定しておきたい3つの設定、

  • ロケールの設定
  • 土曜日、日曜日の背景色の設定
  • 祝日の取得、背景色の設定

についてシェアします。

目次

導入

導入まで

設定の前に導入について記載します。導入に関しては基本的に公式のドキュメントを読めば問題なく進めるかと思います。

fullcalendar.io
Initialize with Script Tags - Docs | FullCal...
https://fullcalendar.io/docs/initialize-globals
It’s possible to manually include the necessary <script> tags in the head of your HTML page and then initialize a calendar via browser globals.

公式ではnpm,yarm等のパッケージマネージャを使う方法と<script>タグを使う方法が記載されています。今回は<script>タグを使用して読み込みます。

自前でライブラリをダウンロードするので、Getting Startedのページからダウンロードし、展開します。

fullcalendar.io
Getting Started - Docs | FullCalendar
https://fullcalendar.io/docs/getting-started#download
There are a few different ways to install the FullCalendar library.

展開後、以下のindex.html、calendar.jsを用意し、ライブラリを読み込みます。

index.html

<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='fullcalendar/core/main.css' rel='stylesheet' />
    <link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'fullcalendar%2Fcore%2Fmain.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'fullcalendar%2Fdaygrid%2Fmain.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'calendar.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
  </head>
  <body>
    
<div id='calendar'></div>

  </body>
</html>

calendar.js

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid' ],
    });
    calendar.render();
});

 

この時点での表示

上記完了時点、つまり初期表示時は以下の表示。現在日付のみが背景色設定されていますが、これでは少し寂しい。

設定すること

ロケールの設定

現状では月、曜日等の表記が英語になっている為、日本語化する。

index.html

導入時にダウンロードしたzipに日本用のロケールファイルが含まれている為、対象ファイルを読み込む。（3つ目のファイル）

 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'fullcalendar%2Fcore%2Fmain.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'fullcalendar%2Fdaygrid%2Fmain.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'fullcalendar%2Fcore%2Flocales%2Fja.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'calendar.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

calendar.js

fullcalendarインスタンス生成時にlocaleを設定する。

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid' ],
        locale: 'ja'
    });

この時点での表示

月、曜日等の表示が日本語になりました。

土曜日、日曜日の背景色設定

通常「カレンダー」といえば、土曜日が青色、日曜日が赤色で表記される事が多いと思います。

現状では土曜日、日曜日が平日と同様の表示なので、これを修正していきます。


index.html

カスタマイズ用のCSS、calendar.cssの読み込みを追加します。

 <link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />
<link href='calendar.css' rel='stylesheet' />

calendar.css

fullcalendarでは各曜日に対してclassが設定される為、このclassを使用して、土曜日のclass、日曜日のclassに対して背景色を設定します。

td.fc-sat {
    background-color: #eaf4ff;
}
td.fc-sun {
    background-color: #ffeaea;
}

この時点での表示

土曜日、日曜日に背景色が設定されました。

祝日の設定

最後に祝日を表示します。日本の祝日データを取得する方法ですが、少し調べるとGoogle Calendar API を使用する方法がヒットしました。

同じ内容を書いてもあまり意味が無いので今回はUltraDate.jsを使用します。

UltraDate.jsは以下から取得可能。作成者が日本の方なので、ドキュメントも日本語対応です。ありがたい。

hrdaya.github.io
 
UltraDate.js
https://hrdaya.github.io/UltraDate.js/

index.html

前述のUltraDate.jsを読み込みます。日本語化用のファイル（このファイルが重要）も一緒に読み込みます。

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'fullcalendar%2Fcore%2Fmain.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'fullcalendar%2Fdaygrid%2Fmain.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'fullcalendar%2Fcore%2Flocales%2Fja.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'UltraDate.min.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'UltraDate.ja.min.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'calendar.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

calendar.js

各日付セルのレンダリンク時のフックを使用し、祝日の判定を行い、祝日の場合はその祝日名を返すようにします。

    const date = new UltraDate();
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid' ],
        locale: 'ja',
        dayRender: function(info) {
            date.setFullYear(
                info.date.getFullYear(),
                info.date.getMonth(),
                info.date.getDate()
            );
            const holiday = date.getHoliday();
            if (holiday !== "") {
                info.el.insertAdjacentHTML("afterbegin", "
<div class=\"holiday-name\">" + holiday + "</div>

");
                info.el.classList.add("fc-hol")
            }
        },
    });

calendar.css

上記JavaScriptで、祝日の時に祝日を示すclassを追加するように処理を追加したので、そのclassに対して背景色、文字色等を設定して整えます。

td.fc-sat {
    background-color: #eaf4ff;
}
td.fc-sun, td.fc-hol {
    background-color: #ffeaea;
}

.holiday-name {
    width: 90px;
    font-size: 13px;
    color: red;
}

最終的な表示

最終的にこんな感じに表示されました。土日祝の表示がされ、標準的なカレンダーと言えるのではないでしょうか。

 

JavaScript(TypeScript)カテゴリの最新記事