Question

我已将完整日历安装到Rails应用程序的红宝石中。我不知道为什么变化没有持久。我想使用拖放和调整大小功能。我已经跟踪了他们的文件，但被卡住了。

我认为我在回调URL上犯了一个错误？

感谢您的帮助！

全日历文档：

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

这是我的错误，需要添加以下代码：

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'
  });
}

完整的日历更改未持久：事件拖动和事件大小调整

1 个答案: