3
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【railsでfullcalendar】fullcalendarでの日程の変更をのDBに反映する

Last updated at Posted at 2018-01-13

【環境】
ruby 2.5.0
rails 5.1.2
fullcalendar-rails

【目的】
railsのアプリ上で、fullcalendarでイベントの時間を変更したときに、DBにも変更を反映すること。

【フロー】
イベントの時間が変更されたことを受け取る
(fullcalendarでの表示の変更)

ajaxでpatch

DBでも変更

【コード】

calendar.js

$(document).ready(function() {
    //イベントを編集するための関数を設定
    //ajaxでpostするときは、自分でcsrf-tokenを投げるための設定が必要
    //ajaxでpatchする際は、postでmethodをpatchに指定する
    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: "post",
        url: "/editevent",
        data: {
          start: start.toISOString(),
          end: end.toISOString(),
          id: id,
          _method: 'PATCH'
        }
      }).done(function(data){
        alert("変更しました!");
      }).fail(function(data){
        alert("変更できませんでした。");
      });
    };

    $('#calendar').fullCalendar({
      header: {
        right: 'month,agendaWeek,agendaDay'
      },

      editable: true,
      eventResize: function(event) {
        var start = event.start;
        var end = event.end;
        var id = event.id;
        edit_event(start, end, id);
      },
    });
});


config.rb

patch '/editevent', to: 'events#edit_event'

events_controller.rb

class EventsController < ApplicationController
    def edit_event
      starttime = params[:start] 
      endtime = params[:end]
      event = Event.find(params[:id])
      event.update(starttime: starttime,
                    endtime: endtime)
    end
end

コードは一部簡略化していますが、これでも動くと思います。

【参考にしたサイト】
【初心者向け】Rails5+FullCalendarでイベントを登録する
jQuery.ajaxPrefilter() | jQuery API Documentation
fullcalendar

3
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?