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>

events_controller

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

events.coffee

$(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 }
    }
  });
};