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

更新日:

2019年1月20日更新:
現在 Ver.4.0.0-alpha.4 が公開されています。


元々jQueryのカレンダープラグインとして FullCalendar がありましたが、最近 jQueryや Moment.js を使用しなくなったバージョンのリリースを始めたようです。
2018/10/22 執筆時現在 Ver.4.0.0-alpha.2が公開されているのでそのバージョンで説明します。

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 ~その1 スケジュール表を作成する~

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

基本設定

カレンダーを表示する

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

<head>
<link href='fullcalendar.css' rel='stylesheet' />
<script src='fullcalendar.js'></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {});
    calendar.render();
  });
</script>
</head>
<body>
  <div id='calendar'></div>
</body>

GitHub Pages:サンプル default.html

jQuery版と比較すると、
・jQuery,Moment.jsを必要としなくなった
・DOMの取得方法がネイティブのgetElementByIdになった
・カレンダーの生成方法が new FullCalendar.Calendar() になった

<head>
<link href='fullcalendar.css' rel='stylesheet' />
<!--
<link href='fullcalendar.print.min

左側のコンテンツ40%

右側のコンテンツ60%

.css' rel='stylesheet' media='print' /> <script src='moment.js'></script> <script src='jquery.js'></script> --> <script src='fullcalendar.js'></script> <script> document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, {}); calendar.render(); }); //$(document).ready(function() { // $('#calendar').fullCalendar(); //}); </script> </head> <body> <div id='calendar'></div> </body>

イベントを追加する

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

var calendar = new FullCalendar.Calendar(calendarEl, {
  defaultDate: '2018-03-20',
  events: [
    {
      title: '来客',
      start: '2018-03-20'
    },
    {
      title: '旅行',
      start: '2018-03-25T06:00:00',
      end: '2018-03-30T22:00:00'
    }
  ]
});

GitHub Pages:サンプル event.html

上記設定では、
・2018年3月20日 来客
・2018年3月25日 6時 ~ 2018年3月30日 22時 まで旅行
というイベントを設定しています。

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

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

日本語表記に変更する

言語用のファイルをインクルードし、オプションを追加します。

locale
 'ja','uk'等、対.min応するJSファイルを読み込み指定する
<head>
<link href='fullcalendar.css' rel='stylesheet' />
<script src='fullcalendar.js'></script>
<script src='locales/ja.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      locale:'ja'
    });
    calendar.render();
  });
</script>

jQuery版では、「lang」オプションを使用していました。

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

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

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

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

GitHub Pages:サンプル color_sun_sat.html

設定・カスタマイズ

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

firstDay
 0(日)~6(土)の数値を指定する。初期値は「0 = 日曜日」

つまり、月曜からの場合は、1を指定すれば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ファイルを外部サーバーから読み込む事が可能になります。ただし、まだアルファ版ですので書かずにおいておきます。

また正式にリリースされた場合に加筆します。

-JavaScript
-

Copyright© 打ち聞かせ , 2019 All Rights Reserved Powered by STINGER.