はじめに

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) {

            // *** 省略 ***

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

            // 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/