Ruby on Rails 【FullCalendar】Ruby on Rails6.0でフルカレンダーを利用する


投稿日:2020年09月06日 (日)
Ruby on Rails6.0でフルカレンダーを利用するにはyarnを使ってFullCalendarをインストールします。

コマンド
yarn add @fullcalendar/core@5.3.1 @fullcalendar/daygrid @fullcalendar/interaction@5.3.1

  • core: 必ず必要
  • daygrid: 1ヶ月カレンダーを表示(dayGridMonth、dayGridWeek、dayGridDay、dayGridがあります。)
  • interaction: イベント・アクション用

「app/javascript/packs/application.js」ファイルに以下の記述を追加します。
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('DOMContentLoaded', function() {

  let calendarEl = document.getElementById('calendar');

  let calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, interactionPlugin],
    editable: true,
    initialView: 'dayGridMonth'
  
  });

  calendar.render();
});


これでフルカレンダーがRuby on Rails6.0で表示できるようになります。
使用できるプラグインは以下を参照します。

もう一つのフルカレンダーを表示する方法があります。



インストールは同じように行います。

コマンド
yarn add @fullcalendar/core@5.3.1 @fullcalendar/daygrid @fullcalendar/interaction@5.3.1


「app/javascript/packs/application.js」ファイルに以下の記述を追加します。
window.Calendar = require("@fullcalendar/core").Calendar;
window.DayGridPlugin = require("@fullcalendar/daygrid").default;
window.interactionPlugin = require("@fullcalendar/interaction").default;


フルカレンダーを表示したいビューに以下の記述を追加します。
<div id="calendar"></div>

<script>

  $(function() {

    var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {
  
      headerToolbar: {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,listMonth'
      },
      buttonText: {
            month:    '月',
            list:     'リスト',
      },
      timeZone: 'JST',
      locale: 'ja', 
      plugins: [DayGridPlugin, interactionPlugin],
      initialView: 'dayGridMonth',

    });
    calendar.render();

  });

</script>


どちらの場合も同じ結果となります。

当サイトのプロジェクト「民泊サイトの構築(Rails6.0)」ではRuby on Rails6.0におけるフルカレンダーの使い方を詳細に解説しています。
参考にしてください。

Rails6.0 Windows MacOSX

動画学習サイトの構築 Rails6.0

  0 (0)

タスク   128

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

民泊サイトの構築 Rails6.0

  0 (0)

タスク   128

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

動画学習サイトの構築 Rails5.0

  0 (0)

タスク   100

1,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

お仕事売買サイトの構築 Rails6.0

  0 (0)

タスク   146

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

民泊サイトの構築 Rails5.0

  0 (0)

タスク   136

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。