How to properly use Fullcalendar jQuery plugin in rails

Question

I am using the gem 'fullcalendar-rails' in rails 4 to use the jquery fullcalendar, by the way I´m new in rails, and I've spent many days trying to make this work but I can't find a guide to do a proper post from the calendar to the controller in rails and then save it to the database.

I've tried this guide, but nothing seems to work properly, 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

Actually this is 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

EVENT 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 a lot of research i found the proper way to make it work the fullcanlendar with rails, so i will let you the code. This is an example using the week calendar.

If your language is english then ignore the changes of names, but if you don't you can use it to change it to your language. monthNames, monthNamesShort, dayNames, dayNamesShort and the "today" button in buttonText.

In "user name" you can validate whatever you want, like the title or another 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'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"
  });
};

In the event model are 4 attributes that are strictly necessary to make it work, they are the start, end, title and allDay variables.

The as_json method fetch every event from database and send it formatted to every cell in the calendar, so the "url" attribute will be the link to the "show" of every event, so if you clicked that link it will send you to that view (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 in here, the code is self-explanatory.

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

With this example you can save and show your events without problem in rails, but if you want to change the way that the data in the event is shown, i would recommend you to change the css properties of the calendar, for example:

if you want to show only the title in the event without the start and end time, you have to do this:

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

And if you want to center the title:

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

As you can see is pretty easy and you don't need to change the original code of the fullcalendar.

Hope it helps!! :D!!