JSカレンダーライブラリ EventCalendar の使い方まとめ #JavaScript

はじめに

この記事はJSのカレンダーライブラリのEventCalendarの使い方をまとめます。

この記事の対象者

JSのカレンダーライブラリで何を使っているか迷っている方
EventCalendarの使い方を知りたい方

EventCalendarの概要

カレンダーの表示およびそのカレンダーにイベントを書いたりできるライブラリです。
カレンダーも月ごとに表示したり、1週間ごとに表示するなど、さまざまなカレンダーを扱うことができます。
FullCalendar というカレンダーライブラリにインスパイアされたライブラリで、そのライブラリと同じオプションをそのまま使えるようです。

EventCalendarのデモサイト

実際に試してみたサンプル

紹介する機能を一通り試してみたサンプルがあるため、実際に動かしたい場合はこちらを参照してください。

インストール方法

npmでインストールするかcdnで参照するかどちらかを選べます。

npm install

cdn

基本的な使い方

EventCalendarクラスにカレンダーを表示するタグとオプションを渡します。

<div id="ec">
</div>

let ec = new EventCalendar(document.getElementById('ec'), {
    view: 'dayGridMonth',
    events: [
        // your list of events
    ]
});

日付の設定方法

dateオプションを指定することで、最初に表示しておきたい日付を設定できます。
dateオプションには String もしくは Date を渡せます。

let ec = new EventCalendar(document.getElementById('ec'), {
    view: 'dayGridMonth',
    date: '2023-03-01'  // 2023-03-01が表示された状態で表示される
    //date: new Date('2024-03-01'),  // Date型でもOK
});

あとから設定したい場合はsetOption関数を使います。

ec.setOption('date',  '2023-01-01');
//ec.setOption('date',  new Date('2023-01-01'));  // Date型でもOK

参考

Dateオプション

setOption関数

日付のフォーマットを変更したい

dayCellFormatオプションを指定することで日付のフォーマットを変更できます。
以下の例は日付を左0埋めで表示したい場合の例です。

let ec = new EventCalendar(document.getElementById('ec'), {
    view: 'dayGridMonth',
    dayCellFormat: function(date) {
      return date.getDate().toString().padStart(2, '0');
    },
});

参考

dayCellFormatオプション

イベントを表示したい

eventsオプションを指定することでイベントを表示できます。
eventsオプションではEventオブジェクトを配列で渡します。

Eventオブジェクトが受け取るプロパティはいくつかありますが、主に使うであろうオプションのみ挙げておきます。

プロパティ	意味
start	イベントの開始日
end	イベントの終了日
title	イベントに表示するテキスト
textColor	イベントの文字色
color	イベントの背景色

let ec = new EventCalendar(document.getElementById('ec'), {
  view: 'dayGridMonth',  
  events: [
    {start: "2024-04-01", end: "2024-04-03", title: "イベント1", textColor: "#000000", color: "#FFFF00"},
    {start: "2024-04-05", end: "2024-04-05", title: "イベント2", textColor: "#0D61A9", color: "#FE6B64"},
  ],
});

参考

eventsオプション

Eventオブジェクト

ヘッダ部分に表示する項目を変更したい

EventCalendar ではヘッダ部分に年月や月を変更するボタンなどを表示できます。
このヘッダ部分を変更したい場合、headerToolbar オプションを使うと変更できます。

ヘッダ部分が start、center、end に分かれており、それぞれの場所に表示したいものを文字列で指定します。

指定できるプロパティは以下です。

プロパティ	意味
title	カレンダーのタイトルを表示する。月のカレンダーだと「2024年1月」とかが出る
prev	カレンダーを先月に移動するボタン
next	カレンダーを次の月に移動するボタン
today	本日に移動するボタン
dayGridMonth などviewオプションに指定できるもの	カレンダーの表示方式を変更するボタン

let ec = new EventCalendar(document.getElementById('ec'), {
  view: 'dayGridMonth',
  headerToolbar: {
	start: 'prev', center: 'title', end: 'today timeGridWeek next'
  },
});

日付をクリックした際のイベントを受け取りたい

日付部分をクリックした際に何かしらの動作を行いたい場合、dateClickオプションを設定することでクリックしたイベントを受け取ることができます。

dateClickオプションには引数を一つ受け取る関数を指定します。

引数にはクリックした日付などの情報が入ってきますが、詳しくはドキュメントを参照してください。

let ec = new EventCalendar(document.getElementById('ec'), {
  view: 'dayGridMonth',
  dateClick: function (info) {
    alert('dateClick されたよ');
    console.log(info);
  }
});

イベントをクリックした際のイベントを受け取りたい

イベント部分をクリックした際に何かしらの動作を行いたい場合、eventClickオプションを設定することでクリックしたイベントを受け取ることができます。

eventClickオプションには引数を一つ受け取る関数を指定します。

引数にはクリックしたイベントなどの情報が入ってきますが、詳しくはドキュメントを参照してください。

let ec = new EventCalendar(document.getElementById('ec'), {
  view: 'dayGridMonth',
  eventClick: function (info) {
    alert('eventClick されたよ');
    console.log(info);
  }
});

参考

まとめ

JSのカレンダーライブラリのEventCalendarの使い方をまとめました。
紹介した機能の他にも多くの機能があるため、気になる方はGitHubのREADMEを読んでみてください。