Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

【環境】
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

kneegorilla
農学部のbioengineer
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away