jquery - 如何在Rails中正确使用Fullcalendar jQuery插件

我正在使用rails 4中的gem'fullcalendar rails'来使用jquery fullcalendar，顺便说一下，我是rails中的新手，我已经花了很多天的时间来尝试实现这一点，但是我找不到一个指南来做一个从rails中的日历到控制器的正确文章，然后将其保存到数据库中。
我试过这本指南，但似乎没什么能正常工作，有人知道怎么做吗？
http://www.rkonrails.com/blog/2013/10/full-calendar-rails-jquery-full-calendar-in-rails/
http://blog.crowdint.com/2014/02/18/fancy-calendars-for-your-web-application-with-fullcalendar.html
实际上这是我的代码：
事件模型

  class Event < ActiveRecord::Base
    def self.between(start_time, end_time)
      where('starts_at > :lo and starts_at < :up',
        :lo => Event.format_date(start_time),
        :up => Event.format_date(end_time)
      )
    end

    def self.format_date(date_time)
     Time.at(date_time.to_i).to_formatted_s(:db)
    end

    def as_json(options = {})
      {
        :id => self.id,
        :title => self.title,
        :description => self.description || "",
        :start => starts_at.rfc822,
        :end => ends_at.rfc822,
        :allDay => self.all_day,
        :recurring => false,
        :url => Rails.application.routes.url_helpers.event_path(id)
      }
    end
  end

事件控制器

class EventsController < ApplicationController
  def new
    @event = Event.new
    respond_to do |format|
      format.html # new.html.erb
      format.js
    end
  end

  def create
    @event = Event.new params['event']

    if @event.save
      render nothing: true
    else
      render :json => { }, :status => 500
    end
  end

  def index
    @events = Event.between(params['start'], params['end']) if (params['start'] && params['end'])
    respond_to do |format|
      format.html # index.html.erb
      format.json { render :json => @events }
    end
  end
end

calendar.js.咖啡

$(document).ready ->
  $('#calendar').fullCalendar
    editable: false,

    columnFormat: {
      month: 'dddd',
      week: 'dddd d',
      day: 'ddd'
    }
    buttonText: {
      today:    'today',
      month:    'month',
      week:     'week',
      day:      'day'
    }

    minTime: "08:00:00"
    maxTime: "23:00:00"
    header:
      left: 'prev,next today',
      center: 'title',
      right: ''
    firstDay: 1


    selectable: true
    selectHelper: true
    select: (start, end) ->
      title = prompt("Event Title:")
      eventData = undefined
      if title
        eventData =
          title: title
          start: start
          end: end
        $("#calendar").fullCalendar "renderEvent", eventData, true # stick? = true
      $("#calendar").fullCalendar "unselect"


    defaultView: 'agendaWeek',
    allDaySlot: false,
    height: 500,
    slotMinutes: 30,
    eventSources: [{
      url: '/events',
    }],
    timeFormat: 'h:mm t{ - h:mm t} ',
    dragOpacity: "0.5"
    eventDrop: (event, dayDelta, minuteDelta, allDay, revertFunc) ->
      updateEvent(event);
    eventResize: (event, dayDelta, minuteDelta, revertFunc) ->
      updateEvent(event);

updateEvent = (the_event) ->
  $.update "/events/" + the_event.id,
    event:
      title: the_event.title,
      starts_at: "" + the_event.start,
      ends_at: "" + the_event.end,
      description: the_event.description

事件迁移

  create_table "events", force: true do |t|
    t.string   "title"
    t.string   "starts_at"
    t.string   "ends_at"
    t.string   "description"
    t.string   "allDay"
    t.datetime "created_at"
    t.datetime "updated_at"
  end

最佳答案

所以，经过大量的研究，我找到了使它在rails上完全可用的正确方法，所以我将让您看到代码。这是一个使用周日历的例子。
如果你的语言是英语，那么忽略名字的变化，但是如果你不这样做，你可以用它来改变你的语言。Monthnames、Monthnameshort、Daynames、DaynamesShort和ButtonText中的“Today”按钮。
在“用户名”中，您可以验证您想要的任何内容，比如标题或其他参数。
日历

var updateEvent;

$(document).ready(function() {
  var todayDate = new Date();
  todayDate.setHours(0,0,0,0);

  $('#calendar').fullCalendar({
    editable: false,
    slotEventOverlap: false,
    monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
    dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
    dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb'],
    columnFormat: {
      month: 'dddd',
      week: 'dddd d',
      day: 'ddd'
    },
    buttonText: {
      today: 'Hoy',
      month: 'month',
      week: 'week',
      day: 'day'
    },
    minTime: "08:00:00",
    maxTime: "23:00:00",
    header: {
      left: 'prev,next today',
      center: 'title',
      right: ''
    },
    firstDay: 1,
    //this section is triggered when the event cell it's clicked
    selectable: true,
    selectHelper: true,
    select: function(start, end) {
      var user_name;
      user_name = prompt("User name: ");
      var eventData;
      //this validates that the user must insert a name in the input
      if (user_name) {
        eventData = {
          title: "Reserved",
          start: start,
          end: end,
          user_name: user_name
        };
        //here i validate that the user can't create an event before today
        if (eventData.start < todayDate){
          alert('You can't choose a date that already past.');
          $("#calendar").fullCalendar("unselect");
          return
        }
        //if everything it's ok, then the event is saved in database with ajax
        $.ajax({
          url: "events",
          type: "POST",
          data: eventData,
          dataType: 'json',
          success: function(json) {
            alert(json.msg);
            $("#calendar").fullCalendar("renderEvent", eventData, true);
            $("#calendar").fullCalendar("refetchEvents");
          }
        });
      }
      $("#calendar").fullCalendar("unselect");
    },
    defaultView: 'agendaWeek',
    allDaySlot: false,
    height: 500,
    slotMinutes: 30,
    eventSources: [
      {
        url: '/events'
      }
    ],
    timeFormat: 'h:mm t{ - h:mm t} ',
    dragOpacity: "0.5"
  });
};

在事件模型中，有4个属性是使其工作所必需的，它们是start、end、title和allday变量。
as_json方法从数据库中获取每个事件，并将其格式化发送到日历中的每个单元格，因此“url”属性将是指向每个事件的“show”的链接，因此如果单击该链接，它将把您发送到该视图（本例中不包含该视图）。
event.rb（模型）

class Event < ActiveRecord::Base

  # scope :between, lambda {|start_time, end_time| {:conditions => ["? < starts_at and starts_at < ?", Event.format_date(start_time), Event.format_date(end_time)] }}
  def self.between(start_time, end_time)
    where('start_at > :lo and start_at < :up',
      :lo => Event.format_date(start_time),
      :up => Event.format_date(end_time)
    )
  end

  def self.format_date(date_time)
   Time.at(date_time.to_i).to_formatted_s(:db)
  end

  def as_json(options = {})
    {
      :id => self.id,
      :title => self.title,
      :start => start_at.rfc822,
      :end => end_at.rfc822,
      :allDay => allDay,
      :user_name => self.user_name,
      :url => Rails.application.routes.url_helpers.events_path(id),
      :color => "green"
    }
  end
end

这里没有什么要添加的，代码是自解释的。
事件控制器.rb

class EventsController < ApplicationController
  def new
    @event = Event.new
    respond_to do |format|
      format.html
      format.js
    end
  end

  def create
    @event = Event.new(event_params)

    if @event.save
      render json: {msg: 'your event was saved.'}
    else
      render json: {msg: 'error: something go wrong.' }, status: 500
    end
  end

  def index
    @events = Event.between(params['start'], params['end']) if (params['start'] && params['end'])

    respond_to do |format|
      format.html
      format.json { render :json => @events }
    end
  end

  def event_params
    params.permit(:title).merge start_at: params[:start].to_time, end_at: params[:end].to_time, user_name: params[:user_name]
  end

创建事件迁移

class CreateEvents < ActiveRecord::Migration
  def change
    create_table :events do |t|
      t.string :title
      t.datetime :start_at
      t.datetime :end_at
      t.string :allDay
      t.string :user_name

      t.timestamps
    end
  end
end

在这个例子中，您可以在rails中保存和显示事件，没有问题，但是如果您想更改事件中数据的显示方式，我建议您更改日历的css属性，例如：
如果只想在事件中显示标题而不显示开始和结束时间，则必须执行以下操作：

.fc-event-time {
  display: none;
}

如果你想让标题居中：

.fc-event-title{
  text-align: center;
}

如您所见，这非常简单，您不需要更改fullcalendar的原始代码。
希望有帮助！！！！