How to use the Fullcalendar jQuery plugin in rails

Question

I use the gem 'fullcalendar-rails' in rails 4 to use jquery fullcalendar, by the way, I am new on rails and I spent many days trying to make this work, but I can not find the manual to make the correct entry from the calendar to the controller in rails, and then save it to the database.

I tried this guide, but nothing works fine, does anyone know how to do this?

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

This is actually my code:

EVENT MODEL

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 

EVENT CONTROLLER

 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.COFFEE

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

INTERNATIONAL MIGRATION

  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 

Answer 1

So, after much research, I found the right way to get it working with fullcanlendar with rails, so I will give you the code. This is an example of using the weekly calendar.

If your language is English, then ignore the name changes, but if you do not, you can use it to change it to your language. monthNames, monthNamesShort, dayNames, dayNamesShort, and the Today button in buttonText.

In the "username" you can check everything you want, such as a name or other parameter.

calendar.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 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 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" }); }; 

There are 4 attributes in the event model that are strictly necessary to make it work; these are the variables start, end, title and allDay.

The as_json method retrieves each event from the database and sends it to each cell in the calendar, so the url attribute will be a link to the "display" of each event, so if you click on this link, it will send you this opinion (which is not in this example).

event.rb (model)

 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 

There is nothing to add, the code does not require explanation.

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 

create event migration

 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 

In this example, you can save and show your events without problems in the rails, but if you want to change the way data is displayed in the event, I would recommend that you change the css properties in the calendar, for example

if you want to show only the title in the event without beginning and end, you should do this:

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

And if you want to center the name:

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

As you can see, this is quite simple, and you do not need to change the source code of the full calendar.

Hope this helps !: D !!

Answer 2

I don’t know if people faced this problem with rails and full integration with the calendar, simply exchanging experiences with the plugin. For the start and end dates, I used ruby ​​datetime from my db, it displayed fine in chrome, firefox, but didn't work in IE 11.

So, to fix this, apply (your ruby ​​variable) .iso8601 to get a perfectly compatible date.

Just share it!

Answer 3

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

First, in /event.rb models 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 

Here, the code will broadcast event data in the format json, id, title, start, end, allDay, make sure that your data has this data.

Then in the controller / users _controller.rb

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

render the @events objects in json format, so now this json-url should be like localhost: 3000 / users / (: id) .json

Last step is to load json in js

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

Use window.location.href to get the current url, plus ".json", hmmm, its lazy haha ​​way.

So far, FullCalendar has worked for you :)