この記事はAteam Brides Inc. Advent Calendar 2019　11日目の記事です。

はじめに

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

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

FullCalendarとは

FullCalendarとはオープンソースのJavaScriptカレンダープラグインです。
現在はTypeScript、React、Vue、Angularにもコンポーネントを提供しているみたいですね。

使用環境

FullCalendar v4.31
今回はダウンロードした場合で使用しています。

使い方

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

<!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に使用したいactionやviewに対して必要なプラグインとダウンロードができますが、FullCalendarをダウンロードした場合は、momentやbootstrapなど基本的なプラグインは最初から入っています。

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

日本語化

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

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

設定

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


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の設定を全て書きたいですが量が多かったため、今回はピックアップして書きました。
全ての設定を見たい方は公式ページのドキュメントを参照ください。

私たちのチームで働きませんか？

エイチームは、インターネットを使った多様な技術を駆使し、幅広いビジネスの領域に挑戦し続ける名古屋の総合IT企業です。
そのグループ会社である株式会社エイチームブライズでは、一緒に働く仲間を募集しています！

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

Qiita Jobsよりメッセージお待ちしております！

FullCalendar v4について