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

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


### イメージ

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/1d21f49d-64ec-123f-89dd-623501a8b2cb.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/510d69fb-2222-5b87-1779-152c9c2fa322.png)


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

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




# 前提条件

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

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

# 実装

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

```javascript: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/

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/