如何在rails中正确使用Fullcalendar jQuery插件

如果您的语言是英语,则忽略名称的更改,但如果不是,则可以使用它将其更改为您的语言. monthNames,monthNamesShort,dayNames,dayNamesShort和buttonText中的“今天”按钮.

在“用户名”中,您可以验证您想要的任何内容,例如标题或其他参数.

calendar.js

var updateEvent;

$(document).ready(function() {
  var todayDate = new Date();
  todayDate.setHours(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','Mié','Jue','Vie','Sáb'],day: 'ddd'
    },buttonText: {
      today: 'Hoy',month: 'month',week: 'week',day: 'day'
    },minTime: "08:00:00",maxTime: "23:00:00",header: {
      left: 'prev,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",true);
            $("#calendar").fullCalendar("refetchEvents");
          }
        });
      }
      $("#calendar").fullCalendar("unselect");
    },defaultview: 'agendaWeek',eventSources: [
      {
        url: '/events'
      }
    ],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',: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,: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

这里没有什么可以添加的,代码是不言自明的.

events_controller.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的原始代码.

希望能帮助到你！！ ：d！