FullCalendar v4について

この記事は[Ateam Brides Inc. Advent Calendar 2019](https://qiita.com/advent-calendar/2019/a-t-brides)　11日目の記事です。

# はじめに
初めての投稿のため、乱筆乱文ご容赦下さい。
今年の3月にローンチされたRuby on Railsで作られたWebサービスのサイト開発を行なっています。

本日は[FullCalendar](https://fullcalendar.io/)のv4について投稿しようと思います。
今年の3月にリリースされたv4では、v3までのコードがそのまま使えなかったので、変わったところ含めて使い方を書きます。

# FullCalendarとは
[FullCalendar](https://fullcalendar.io/)とはオープンソースのJavaScriptカレンダープラグインです。
現在はTypeScript、React、Vue、Angularにもコンポーネントを提供しているみたいですね。

# 使用環境
FullCalendar v4.31
今回は[ダウンロード](https://fullcalendar.io/docs/getting-started)した場合で使用しています。

# 使い方
[公式ページ](https://fullcalendar.io/docs/initialize-globals)の通り実装すれば、カレンダーが表示されると思います。
v3との違いで注意する点としては``calendar.render();``が無いとカレンダーが表示されない事と、使用したいactionやviewに対応したプラグインを指定しなければいけないという点ですね。

```html
<!DOCTYPE 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' />

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

    <script>

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

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

        calendar.render();
      });

    </script>
  </head>
  <body>

    <div id='calendar'></div>

  </body>
</html>
```

# プラグインの指定方法
[Plugin Index](https://fullcalendar.io/docs/plugin-index)に使用したいactionやviewに対して必要なプラグインとダウンロードができますが、FullCalendarをダウンロードした場合は、momentやbootstrapなど基本的なプラグインは最初から入っています。

その中で必要なプラグイン名を`plugins: ['dayGrid', 'interaction', 'timeGrid', 'list']`みたいに記載すれば、指定されたプラグインに入っているactionやviewを使用することができます。

# 日本語化
ローカライズはcoreに入っているので日本語を指定したい場合は下記ように指定して、オプションに``locale: 'ja'``を追加すれば日本語で表示されます。

```html
<script src='fullcalendar/core/locales/ja.js'></script>
```

# 設定
オプションやview、actionについて、ピックアップしてさせて書きます。
下記の設定があれば、基本的なことはできると思います。

```javascript

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: ['dayGrid', 'timeGrid', 'list'], // 使用したいactionやviewに対するプラグインを指定します
    locale: 'ja',                             // 上記に書いた日本語の設定です
    header: {                                 // ヘッダーに表示する内容を指定します
      left:   'title',                        // ヘッダーの左側に表示する物を指定
      center: '',                             // ヘッダーの中央に表示する物を指定
      right:  'today,prev,next'               // ヘッダーの左側に表示する物を指定
    },
    handleWindowResize: false,                // ウインドウサイズ変更時カレンダーサイズを変更するか否か（falseで変更をしません）
    minTime: "00:00:00",                      // スケジュールの開始時間
    maxTime: "24:00:00",                      // スケジュールの最終時間
    defaultTimedEventDuration: '10:00:00',    // 画面上に表示する初めの時間(初期にスクロールされている場所)
    slotDuration: '00:15:00',                 // 表示する時間軸の単位（左記の設定で15分刻み）
    snapMinutes: 15,                          // 選択する時間間隔（15分単位で範囲指定できます）
    editable: false,                          // カレンダーのイベントが変更フラグ（falseで編集不可）
    droppable: false,                         // 外部要素からのドラッグアンドドロップを受け付けるか（falseで不可）
    dragRevertDuration: 500,                  // ドラッグに失敗した時に戻るまでの時間（ms）
    selectable: false,                        // 選択不可
    selectHelper: true,                       // 選択時にプレースホルダーを描画
    scrollTime: '09:00:00',                   // 画面上に表示する初めの時間(初期にスクロールされている場所)
    unselectAuto: false,                      // ページのどこかをクリックしたとき、選択状態をキャンセルするか
    selectMinDistance: 0,                     // クリック後に移動した距離で、clickかdragか判定
    firstDay: 1,                              // 週始めの曜日指定（左記では月曜日始まり）
    eventTimeFormat: {                        // イベントの時間表示方法の設定（左記では7時は7:00と表示されます）
      hour: 'numeric',
      minute: '2-digit'
    },
    views: {                                  // 各ビュー（月表示、週表示など）のみに適用される設定ができます
      dayGridMonth: {},
      dayGrid: {},
      timeGrid: {},
      week: {},
      day: {}
    },
    // eventsは実際表示させるイベントのデータをjson形式で書くことができます
    // ajaxで動的にデータを取得できたりもします
    events: function(fetchInfo, successCallback, failureCallback) {},
    dateClick: function(dateClickInfo) {},    // 日付又は時間のクリックした時に走るメソッド
    select: function(selectionInfo) {},       // こちらも日付又は時間を選択した場合に走るメソッドですが、ドラッグ（複数日選択）でも走ります
    dayRender: function(dayRenderInfo) {},    // 日付の表示する際に走るメソッドで特定の日だけ色を変えたい等できます
    eventClick: function (info) {}            // イベントをクリックした時に走るメソッド
  });
  calendar.render();
});
```
# まとめ
FullCalendarの設定を全て書きたいですが量が多かったため、今回はピックアップして書きました。
全ての設定を見たい方は[公式ページのドキュメント](https://fullcalendar.io/docs)を参照ください。


# 私たちのチームで働きませんか？
![alt](https://brides.a-tm.co.jp/wp-content/uploads/2019/11/ATEAM_BRIDES.jpg)
[エイチーム](https://www.a-tm.co.jp/)は、インターネットを使った多様な技術を駆使し、幅広いビジネスの領域に挑戦し続ける**名古屋の総合IT企業**です。
そのグループ会社である**株式会社エイチームブライズ**では、一緒に働く仲間を募集しています！

- [ハナユメ サイト開発グループ](https://jobs.qiita.com/employers/brides-a-tm/development_teams/138)
- [HIMARI開発チーム](https://jobs.qiita.com/employers/brides-a-tm/development_teams/147)
- [技術開発部](https://jobs.qiita.com/employers/brides-a-tm/development_teams/148)

上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずは**チャットでざっくばらんに話**をしましょう。
技術的な話だけでなく、私たちが大切にしていることや、お任せしたいお仕事についてなどを詳しくお伝えいたします！

[Qiita Jobs](https://jobs.qiita.com/)よりメッセージお待ちしております！