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

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

https://github.com/vkurko/calendar

## この記事の対象者
- JSのカレンダーライブラリで何を使っているか迷っている方
- EventCalendarの使い方を知りたい方


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

https://fullcalendar.io/


## EventCalendarのデモサイト

https://vkurko.github.io/calendar/

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

https://jsfiddle.net/tomoprog/r4yjnt8L/69/

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

### npm install

https://github.com/vkurko/calendar?tab=readme-ov-file#svelte-component--es6-module

### cdn

https://github.com/vkurko/calendar?tab=readme-ov-file#pre-built-browser-ready-bundle


## 基本的な使い方

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

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

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

## 日付の設定方法

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


```js
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関数を使います。

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

### 参考
- Dateオプション

https://github.com/vkurko/calendar?tab=readme-ov-file#date

- setOption関数

https://github.com/vkurko/calendar?tab=readme-ov-file#setoption-name-value-

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

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

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

### 参考

- dayCellFormatオプション

https://github.com/vkurko/calendar?tab=readme-ov-file#daycellformat

## イベントを表示したい

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

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

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

```js
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オプション

https://github.com/vkurko/calendar?tab=readme-ov-file#events

- Eventオブジェクト

https://github.com/vkurko/calendar?tab=readme-ov-file#event-object


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

### 参考

https://github.com/vkurko/calendar?tab=readme-ov-file#eventclick


## まとめ

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