Как правильно использовать плагин Fullcalendar jQuery в rails

Я использую драгоценный камень "fullcalendar-rails" в rails 4 для использования 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

календарь.JS.Кофе!--5-->

$(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

3 ответов


Итак, после многих исследований я нашел правильный способ заставить его работать с fullcanlendar с rails, поэтому я дам вам код. Это пример использования календаря недели.

если язык английский, то игнорировать изменения имен, но если вы не можете использовать его, чтобы изменить его на ваш язык. monthNames, monthNamesShort, dayNames, dayNamesShort и кнопка "сегодня" в buttonText.

в "имени пользователя" вы можете проверить все, что хотите, например название или другой параметр.

календарь.js

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 "будет ссылкой на" Показать " каждого события, поэтому, если вы нажмете эту ссылку, он отправит вас в это представление (которого нет в этом образец.)

событие.РБ (модель)

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

здесь нечего добавить, код не требует пояснений.

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!!


Не знаю, сталкивались ли люди с этой проблемой с rails и полной интеграцией календаря, просто делясь опытом, который у меня был с плагином. Для даты начала и даты окончания я использовал ruby datetime из моей БД, он отлично отображался в chrome,firefox, но не работал хорошо в IE 11.

поэтому, чтобы исправить это, просто применитесь (ваша переменная ruby).iso8601, чтобы получить идеально совместимую дату.

Просто Делюсь!


http://royxue.me/blog/dev/rails/loading-rails-models-into-fullcalendar/

во-первых, в моделях/событие.rb, add

  def as_json(options = {})
    {
      :id => self.id,
      :title => self.name,
      :start => self.start_time,
      :end => self.end_time,
      :description => self.description,
      :allDay => self.is_all_day,
     }
     end

здесь код будет передавать данные события в формате json, id, title, start, end, allDay важно, убедитесь, что в вашей модели есть эти данные.

затем в контроллере / users_controller.rb

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

рендеринг объектов @events в формат json, поэтому теперь этот url JSON должен быть похож localhost: 3000 / users / (: id).в JSON

последний шаг-загрузить json в js

events: window.location.href + '.json'

окне использовать.местоположение.href, чтобы получить текущий url, плюс".json", хммм, это ленивый способ ха-ха.

до сих пор, FullCalendar будет работать для вас :)