Rails 4-Ajax在Rails应用程序的Fullcalendar中创建事件

Question

我正在尝试将fullcalendar gem集成到我的一个应用程序中，我会链接到两个日期上拖动鼠标，并显示一个弹出窗口，用户可以在其中写入有关事件的信息，并通过ajax（无需重新加载页面）在数据库中创建事件并显示在日历中。

现在，我的日历显示了我手动创建的事件，但当我将鼠标拖动到日期时，它会显示用于输入字段的弹出窗口，并显示日历中的事件，但是当我刷新页面时，事件会消失，这意味着事件不会保存在数据库中。这是我的代码：

index.json.builder

json.array!(@events) do |event|
  json.extract! event, :id, :title, :description
  json.start event.start_time
  json.end event.end_time
  json.url event_url(event, format: :html)
end

events/index.html.erb

<p id="notice"><%= notice %></p>
<h1>Listing Events</h1>
<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>Description</th>
      <th>Start time</th>
      <th>End time</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <% @events.each do |event| %>
      <tr>
        <td><%= event.title %></td>
        <td><%= event.description %></td>
        <td><%= event.start_time %></td>
        <td><%= event.end_time %></td>
        <td><%= link_to 'Show', event %></td>
        <td><%= link_to 'Edit', edit_event_path(event) %></td>
        <td><%= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<br>
<%= link_to 'New Event', new_event_path %>
<div id="calendar"></div>

事件控制器

class EventsController < ApplicationController
  before_action :set_event, only: [:show, :edit, :update, :destroy]
  # GET /events
  # GET /events.json
  def index
    @events = Event.all
  end
  # GET /events/1
  # GET /events/1.json
  def show
  end
  # GET /events/new
  def new
    @event = Event.new
  end
  # GET /events/1/edit
  def edit
  end
  # POST /events
  # POST /events.json
  def create
    @event = Event.new(event_params)
    respond_to do |format|
      if @event.save
        format.html { redirect_to @event, notice: 'Event was successfully created.' }
        format.json { render :show, status: :created, location: @event }
      else
        format.html { render :new }
        format.json { render json: @event.errors, status: :unprocessable_entity }
      end
    end
  end
  # PATCH/PUT /events/1
  # PATCH/PUT /events/1.json
  def update
    respond_to do |format|
      if @event.update(event_params)
        format.html { redirect_to @event, notice: 'Event was successfully updated.' }
        format.json { render :show, status: :ok, location: @event }
      else
        format.html { render :edit }
        format.json { render json: @event.errors, status: :unprocessable_entity }
      end
    end
  end
  # DELETE /events/1
  # DELETE /events/1.json
  def destroy
    @event.destroy
    respond_to do |format|
      format.html { redirect_to events_url, notice: 'Event was successfully destroyed.' }
      format.json { head :no_content }
    end
  end
  private
    # Use callbacks to share common setup or constraints between actions.
    def set_event
      @event = Event.find(params[:id])
    end
    # Never trust parameters from the scary internet, only allow the white list through.
    def event_params
      params.require(:event).permit(:title, :description, :start_time, :end_time)
    end
end

事件。咖啡

$(document).on 'ready page:load', ->
  $("#calendar").fullCalendar(
    events: '/events.json'
    selectable: true
    selectHelper: true
    select: (start, end) ->
      title = prompt("Event Title:")
      description = prompt("Event Description:")
      eventData = undefined
      if title && description
        eventData =
          title: title
          description: description
          start: start
          end: end
        $("#calendar").fullCalendar "renderEvent", eventData, true # stick? = true
      $("#calendar").fullCalendar "unselect"
  )
  $.ajax
  url: 'events'
  type: 'POST'
  data: eventData
  dataType: 'json'
  success: (json) ->
    alert json.msg
    $('#calendar').fullCalendar 'renderEvent', eventData, true
    $('#calendar').fullCalendar 'refetchEvents'
    return

事件模型没有任何代码。

有人能帮我吗？

感谢并向所有致以最良好的问候

Answer 1

您应该像这里一样更改时间格式（这是为了更新，但创建时应该相同）

eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
    return updateEvent(event);
}, 
eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
    return updateEvent(event);
},
updateEvent = function(the_event) {
  $.ajax({
    type: "PUT",
    url: "/users/" + currentUserId + "/events/" + the_event.id,
    data: { event: {
      title: the_event.title,
      start_at: "" + new Date(the_event.start).toUTCString(),
      end_at: "" + new Date(the_event.end).toUTCString(),
      body: the_event.body || "",
      sender_id: the_event.senderId,
      recipient_id: the_event.recipientId,
      all_day: the_event.allDay }
    }
  });
};