Full Calendar changes not persisting: event drag and event resize - ruby-on-rails

Question

I have installed full calendar into my ruby on rails app. I cannot figure out why changes are not persisting. I want to use the drag/drop and resize features. I have followed their documents but I'm stuck.
I think i've made an error on callback url?
I appreciate the help!
Fullcalendar docs:
https://fullcalendar.io/docs/eventResize
appointment_calendar.js:
$(document).ready(function() {
var arr = $('#business_appointment').data('url');
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek',
},
defaultView: 'agendaWeek',
editable: true,
selectable: true,
nowIndicator: true,
timezone: "Australia/Brisbane",
events: arr,
//header and other values
select: function(start, end, allDay) {
starttime = moment(start).format("ddd, MMM Do YYYY, h:mm a");
endtime = moment(end).format("ddd, MMM Do YYYY, h:mm a");
todaytime = moment().format("ddd, MMM Do YYYY, h:mm a");
var mywhen = starttime + ' - ' + endtime;
$('#createEventModal #appointment_from').val(starttime);
$('#createEventModal #appointment_to').val(endtime);
$('#createEventModal #apptAllDay').val(allDay);
$('#createEventModal #when').text(mywhen);
$('#createEventModal').modal('show');
},
eventDrop: function(event, delta, revertFunc) {
event_data = {
event: {
id: event.id,
start: event.start.format(),
end: event.end.format()
}
};
$.ajax({
url: "/app/calendar/" + calEvent.id + "/edit",
data: event_data,
type: 'PATCH'
});
},
eventResize: function(event, delta, revertFunc) {
alert(event.title + " end is now " + event.end.format());
if (!confirm("is this okay?")) {
revertFunc();
}
},
eventClick: function(calEvent, jsEvent, view) {
$.ajax({
type: 'GET',
url: "/app/calendar/" + calEvent.id + "/edit",
dataType: "script"
});
},
eventRender: function(event, element)
{
element.find('.fc-time').append("<br/>" + event.residentname);
element.find('.fc-time').append("<br/>" + event.appointmenttype);
}
});
$('#submitButton').on('click', function(e){
// We don't want this to act as a link so cancel the link action
e.preventDefault();
doSubmit();
});
function doSubmit(){
$("#createEventModal").modal('hide');
console.log($('#apptStartTime').val());
console.log($('#apptEndTime').val());
console.log($('#apptAllDay').val());
$("#calendar").fullCalendar('renderEvent',
{
title: $('#residentName').val(),
start: new Date($('#apptStartTime').val()),
end: new Date($('#apptEndTime').val()),
allDay: ($('#apptAllDay').val() == "true"),
},
true);
}
});
calendar_controller.rb:
require "datetime_format"
class App::CalendarController < App::BaseController
include DateTimeFormat
before_action :set_appointment, only: [:edit,:update]
def index
#arr = []
#business_appointments = current_business.appointments
#business_appointments.each do |business_appointment|
hash = {}
hash["start"] = business_appointment.start
hash["end"] = business_appointment.end
hash["title"] = business_appointment.name
hash["residentname"] = "#{business_appointment.resident.first_name} #{business_appointment.resident.last_name}"
hash["appointmenttype"] = business_appointment.appointment_type.name
hash["id"] = business_appointment.id
#arr << hash
end
#global_arr = #arr
#appointment = current_business.appointments.new
end
# POST/calender_appointment
def create
#appointment = current_business.appointments.new(appointment_params)
#appointment.author_id = current_user.id
respond_to do |format|
if #appointment.save!
format.html { redirect_to app_calendar_index_path, notice: 'Appointment was successfully created.' }
format.json { render :index, status: :created, location: #appointment }
else
format.html { redirect_to app_calendar_index_path, notice: 'Unable to create appointment.' }
format.json { render json: #appointment.errors, status: :unprocessable_entity }
end
end
end
def edit
end
# PATCH/PUT /update_calender_appointment
def update
#appointment.author_id = current_user.id
respond_to do |format|
if #appointment.update(appointment_params)
format.html { redirect_to app_calendar_index_path, notice: 'Appointment was successfully updated.' }
format.json { render :show, status: :ok, location: #appointment }
else
format.html { redirect_to app_calendar_index_path, notice: 'Unable to update appointment.' }
format.json { render json: #appointment.errors, status: :unprocessable_entity }
end
end
end
private
def set_appointment
#appointment = current_business.appointments.find(params[:id])
end
def appointment_params
if params[:action].eql?("create")
params[:appointment][:start] = format_datetime(params[:start]).to_datetime
params[:appointment][:end] = format_datetime(params[:end]).to_datetime
end
params.require(:appointment).permit(:name, :description, :start, :end, :resident_id, :appointment_type_id)
end
end

Answer 1

It was my error, needed to add this code:
updateAppointment = (event) => {
let event_data = {
appointment: {
id: event.id,
start: event.start.format(),
end: event.end.format()
}
};
$.ajax({
url: "/app/calendar/" + event.id,
data: event_data,
type: 'PUT'
});
}