【Rails】 FullCalendar カレンダー内イベント リサイズ時の更新方法

はじめに

Rails アプリケーションにて、 FullCalendar カレンダー内イベントをリサイズするとイベントの終了時間を更新する方法について説明します。
scaffold で Eventモデルを作成しているため、最低限の作業量でカレンダーに機能を追加する方法を実現しています。

イメージ

赤色の矢印方向へドラッグすると、、

イベントの終了時間を更新できる方法について説明します！

関連リンク

関連リンクを下記に載せておくので、必要であれば参考にしてください。。

• 【Rails】 5分でFullCalendar実装する方法
  • https://qiita.com/syukan3/items/68280ce4ff45aa336363

前提条件

FullCalendarをアプリケーションに実装済みであること。

今回はRailsアプリケーションで実装しています。上記の記事を参考にしてみてください。
Railsを使ったことがない人でも簡単に実装することができますので、この機会にRuby と Railsをインストールして使ってみてください。
※Rails アプリケーション以外でも実装する事ができます。

実装

javascript に以下を追加するのみで実装する事ができます。
※ただし、前提条件を満たしていること。scaffold で Eventモデルを作成しているため、最低限の作業量でカレンダーに機能を追加する方法を実現しています。

app/assets/javascripts/application.js

$(function () {
    $(document).on('turbolinks:load', function () {
        if ($('#calendar').length) {

            // *** 省略 ***

            // *** ここから以下、追加 *** 

            // edit_event
            edit_event = function (start, end, id) {
                $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
                    var token;
                    if (!options.crossDomain) {
                        token = $('meta[name="csrf-token"]').attr('content');
                        if (token) {
                            return jqXHR.setRequestHeader('X-CSRF-Token', token);
                        }
                    }
                });
                $.ajax({
                    type: "patch",
                    url: `/events/${id}`,
                    data: JSON.stringify({
                        start_date: start.toISOString(),
                        end_date: end.toISOString(),
                        id: id
                    }),
                    contentType: 'application/JSON'
                }).done(function(data){
                    alert("変更しました!");
                }).fail(function(data){
                    alert("変更できませんでした。");
                });
            };

            // *** ここまで *** 


            // *** 省略 ***

            $('#calendar').fullCalendar({

                // *** 省略 ***

                // *** ここから以下、追加 *** 

                // event が resize されたときに edit_event を実行して、ajax を飛ばす
                eventResize: function(event) {
                    var start = event.start;
                    var end = event.end;
                    var id = event.id;
                    edit_event(start, end, id);
                }

                // *** ここまで *** 

                // *** 省略 ***
            }

まとめ

カレンダーのアプリケーションを作成することになって、そこまで得意ではない Javascript の練習になるなーと思っていましたが、
FullCalendarという強力すぎるライブラリを見つけてしまったため、簡単に実装できてしまいました。
Javascript のスキルアップについては別の機会にでもやろうと思います。

参考

• FullCalendar 公式ドキュメント
  • https://fullcalendar.io/