【Rails】 FullCalendar カレンダー内でのドラッグによるイベント新規作成方法

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


### イメージ


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/a4c69f44-9dac-d832-a849-86af8e4fbaf9.png)

新規でイベントが作成できる方法について説明します！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/91b1245b-07d6-affb-8fc9-6d215efcdf85.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) {

            // *** 省略 ***

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

            // creat_event
            create_event = function(title, start, end){
                // CSRF Token
                $.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 : 追加時
                $.ajax({
                    type: "post",
                    url: "/events",
                    data: JSON.stringify({
                        title: title,
                        start_date: start.toISOString(),
                        end_date: end.toISOString()
                    }),
                    contentType: 'application/JSON'
                }).done(function(data){
                    alert("登録しました!");
                }).fail(function(data){
                    alert("登録できませんでした。");
                });
            };

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


            // *** 省略 ***

            $('#calendar').fullCalendar({

                // *** 省略 ***

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

                // カレンダーへの追加でイベント保存
                navLinks: true,
                selectable: true,
                selectHelper: true,

                // event が 作成 されたときに create_event を実行して、ajax を飛ばす
                select: function(start, end) {
                    var title = prompt('イベントを追加');
                    var eventData;
                    if (title) {
                        eventData = {
                            title: title,
                            start: start,
                            end: end
                        };
                        $('#calendar').fullCalendar('renderEvent', eventData, true);
                        $('#calendar').fullCalendar('unselect');
                        create_event(title, start, end);
                    }
                },

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

                // *** 省略 ***
            }

```

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

# 参考
* FullCalendar 公式ドキュメント
    * https://fullcalendar.io/

---
### 会社紹介

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

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