JavaScript カレンダープラグイン FullCalendar ～その１スケジュール表を作成する～

2020年2月17日更新：
元々αバージョンで執筆していましたが、Ver. 4.3.1 に対応

元々jQueryのカレンダープラグインとして FullCalendar がありましたが、
jQueryや Moment.js を使用しなくなったVer.4 が公開されています。

FullCalendar
https://fullcalendar.io/

V4 Release Notes and Upgrade Guide
https://fullcalendar.io/docs/v4/release-notes

本ブログにjQueryを使用した Version 3.9.0に関する記事があるので、
それらの記事と構成を合わせ、jQuery版との差異に関しても触れていきます。

jQuery カレンダープラグイン FullCalendar ～その１スケジュール表を作成する～

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

スクリプトを配置する

Ver.4 になり、プラグイン形式になりました。
その為、使用する際には用途に応じて複数の JSファイル,CSSファイルを使用します。

サイトに応じて、必要なプラグインのみ配置するとよいかと思います。
今回のサンプルは fullcalendarという名前のディレクトリに展開しています。

fullcalendar
    |-core
    |-daygrid
    |-google-calendar
    |-...

基本設定

カレンダーを表示する（dayGrid）

公式ドキュメント：Month View - Docs | FullCalendar

・JavaScriptファイルのインクルード
・CSSファイルのインクルード
・設置するカレンダー用のタグ設置
・タグに対しての関数コール

<head>
<meta charset='utf-8' />
<link href='fullcalendar/core/main.css' rel='stylesheet' />
<link href='fullcalendar/daygrid/main.css' rel='stylesheet' />

<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // DOMを取得
    var calendarEl = document.getElementById('calendar');

    // 指定DOMにカレンダープラグインを適用する
    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid' ]
    });
    calendar.render();
  });
</script>
</head>
<body>
  <div id='calendar'></div>
</body>

GitHub Pages：サンプル default.html

JSファイル、CSSファイルは core は必ず含めます。
その他、表示状態に合わせてプラグインを指定します。

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

<script src='fullcalendar/core/main.js'></script>
<script src='fullcalendar/daygrid/main.js'></script>

// 指定DOMにカレンダープラグインを適用する
var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'dayGrid' ]
});

Ver.3(jQuery版)と比較すると、
・fullcalendar（js,css）だけだったが、coreとそれ以外になった
・jQuery,Moment.jsを必要としなくなった
　 DOMの取得方法がネイティブのgetElementByIdになった
・カレンダーの生成方法が new FullCalendar.Calendar() になった

イベントを追加する

公式ドキュメント：Event Parsing - Docs | FullCalendar

カレンダーは簡単に表示できましたね。続いてスケジュール（イベント）を追加します。
Calendarオブジェクト作成時に追加します。

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'dayGrid' ]
  ,defaultDate: '2020-02-10',
  events: [
    {
      title: '来客',
      start: '2020-02-10'
    },
    {
      title: '旅行',
      start: '2020-02-28T06:00:00',
      end: '2020-03-01T22:00:00'
    }
  ]
});

GitHub Pages：サンプル event.html

上記設定では、
・2020年2月10日　来客
・2020年2月28日 6時～ 2020年3月1日 22時　まで旅行
というイベントを設定しています。

events の項目にイベントのオブジェクト配列を指定する形式です。
オブジェクトにどういった設定があるかは、スクリプトファイルを確認して下さい。

他にも jsonの指定が出来たりと、いくつか指定方法があるので付属のデモを確認して下さい。

日本語表記に変更する

公式ドキュメント：locale - Docs | FullCalendar

言語用のファイルをインクルードし、オプションを追加します。
Ver.3(jQuery版)では、「lang」オプションを使用していました。

locale
  'ja','uk'等、対応するJSファイルを読み込み指定する

<head>
...
<script src='fullcalendar/core/locales/ja.js'></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid' ]
      ,locale:'ja'
    });
    calendar.render();
  });

</script>

GitHub Pages：サンプル locale.html

土日がわかりづらいので色を付ける

基本設定でもなんでもなくカスタマイズですが、絶対いるでしょ！という事で基本編に。

これは簡単に実装できます。とりあえず、日曜日は赤に、土曜日は青にしましょう。
CSSの設定で以下の項目を追加します。

/* 日曜日 */
.fc-sun {
    color: red;
    background-color: #fff0f0;
}
 
/* 土曜日 */
.fc-sat {
    color: blue;
    background-color: #f0f0ff;
}

GitHub Pages：サンプル color_sun_sat.html

設定・カスタマイズ

ヘッダーを変更する

header
  left,right,center の3つのプロパティに文字列を指定する。

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'dayGrid' ]
  ,header: {
    left: 'title',
    right: 'today prev,next dayGridMonth,dayGridWeek,dayGridDay'
  },
});

GitHub Pages：サンプル daygrid.html
GitHub Pages：サンプル timegrid.html

「,」で区切ると、ボタンは隙間なく配置され、半角スペースを用いるとボタンの間にスペースが挿入されます。

日曜日からではなく、月曜日から表示する

firstDay
  0（日）～6（土）の数値を指定する。初期値は「0 = 日曜日」

つまり、月曜からの場合は、１を指定すればOKです。

var calendar = new FullCalendar.Calendar(calendarEl, {
  firstDay : 1
});

土日の日程を削除する

weekends    土日を表示するかどうか。初期値はtrue

var calendar = new FullCalendar.Calendar(calendarEl, {
  weekends: false
});

開いた時に、指定した年月日のカレンダーを表示する

defaultDate
  表示したい年月日を指定

var calendar = new FullCalendar.Calendar(calendarEl, {
  defaultDate: '2018-03-20'
});

最適化

CDN（コンテンツデリバリーネットワーク）を利用する

ダウンロードページにも記載されていますが、CDNJSを利用する事が出来る為、jsファイルやcssファイルを外部サーバーから読み込む事が可能になります。

Yarn からアクセスしCDNを探すとよい。と書かれています。
Plugin Index 内にYarnへのリンクが貼られている為、検索も容易です。

JavaScript カレンダープラグイン FullCalendar ～その１ スケジュール表を作成する～