[Java] [Rails] Schedule management using Full Calendar Yesterday’s implementation

4 minute read

Target

ezgif.com-video-to-gif (1).gif

Development environment

・ Ruby: 2.5.7
Rails: 5.2.4
・ Vagrant: 2.2.7
-VirtualBox: 6.1
・ OS: macOS Catalina

Premise

The following has been implemented.

Slim introduction
Introduction of Bootstrap3
Introduction of Font Awesome
-Login function implementation
Implementation of posting function

Implementation

1. Introduce Gem

Gemfile


#Postscript
gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails'

Terminal


$ bundle

2. Edit ʻapplication.scss`

application.scss


 *= require_tree .
 *= require_self
 *= require fullcalendar /*Postscript*/

3. Edit ʻapplication.js`

application.js


//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require moment //Postscript
//= require fullcalendar //Postscript
//= require_tree .

4. Create / edit JavaScript file

Terminal


$ touch app/assets/javascripts/calendar.js

calendar.js


$(function() {
  function eventCalendar() {
    return $('#calendar').fullCalendar({});
  }

  function clearCalendar() {
    $('#calendar').html('');
  }

  $('#calendar').fullCalendar({
    events: '/events.json',

    titleFormat: 'YYYY M month',
    dayNamesShort: ['Day', 'Month', 'fire', 'water', 'wood', 'Money', 'soil'],

    header: {
      left: '',
      center: 'title',
      right: 'today prev,next',
    },

    defaultTimedEventDuration: '03:00:00',
    buttonText: {
      prev: 'Before',
      next: 'Next',
      prevYear: 'Previous year',
      nextYear: 'following year',
      today: 'today',
      month: 'Month',
      week: 'week',
      day: 'Day',
    },
    timeFormat: 'HH:mm',
    eventColor: '#63ceef',
    eventTextColor: '#000000',
  });
});

[Explanation]

function eventCalendar() {
  return $('#calendar').fullCalendar({});
}

function clearCalendar() {
  $('#calendar').html('');
}

② Display in Japanese.

//Display the top of the calendar by year and month
titleFormat: 'YYYY M month',

//Display the day of the week in Japanese
dayNamesShort: ['Day', 'Month', 'fire', 'water', 'wood', 'Money', 'soil'],

③ Arrange the button layout.

header: {
  left: '',
  center: 'title',
  right: 'today prev,next',
},

④ Set the event.

//Set the display interval for events that have no end time
defaultTimedEventDuration: '03:00:00',
buttonText: {
  prev: 'Before',
  next: 'Next',
  prevYear: 'Previous year',
  nextYear: 'following year',
  today: 'today',
  month: 'Month',
  week: 'week',
  day: 'Day',
},

//Set the time display of the event to 24 hours
timeFormat: 'HH:mm',

//Change the color of the event
eventColor: '#63ceef',

//Change the text color of the event
eventTextColor: '#000000',

4. Create a model

Terminal


$ rails g model Event user_id:integer title:string body:text start_date:datetime end_date:datetime

~_create_events.rb


class CreateEvents < ActiveRecord::Migration[5.2]
  def change
    create_table :events do |t|
      t.integer :user_id
      t.string :title
      t.text :body
      t.datetime :start_date
      t.datetime :end_date

      t.timestamps
    end
  end
end

Terminal


$ rails db:migrate

5. Create a controller

Terminal


$ rails g controller events new show edit my_calendar

events_controller.rb


class EventsController < ApplicationController
  before_action :set_event, only: [:show, :edit, :update, :destroy]

  def new
    @event = Event.new
  end

  def create
    @event = Event.new(event_params)
    @event.user_id = current_user.id
    @event.save ? (redirect_to event_path(@event)) : (render 'new')
  end

  def index
    @events = Event.where(user_id: current_user.id)
  end

  def show
  end

  def edit
    unless @event.user == current_user
      redirect_to root_path
    end
  end

  def update
    @event.update(event_params) ? (redirect_to event_path(@event)) : (render 'edit')
  end

  def destroy
    @event.destroy
    redirect_to my_calendar_path
  end

  def my_calendar
  end

  private

    def set_event
      @event = Event.find(params[:id])
    end

    def event_params
      params.require(:event).permit(:user_id, :title, :body, :start_date, :end_date)
    end
end

6. Add routing

routes.rb


#Postscript
resources :events
get 'my_calendar', to: 'events#my_calendar'

7. Create / edit json.jbuilder file

ruby:index.json.jbuilder


json.array!(@events) do |event|
  json.extract! event, :id, :title, :body
  json.start event.start_date
  json.end event.end_date
  json.url event_url(event)
end

[Explanation]

① ʻindex` Repeats the records extracted by the action to create an array.

json.array! @category_children do |children|

(2) Store each data in the array created by .

json.extract! event, :id, :title, :body
json.start event.start_date
json.end event.end_date
json.url event_url(event)

8. Edit view

Edit new.html.slim

① Create HTML.

slim:new.html.slim


.row
  .col-xs-3

  .col-xs-6
    = form_with model: @event, url: events_path, local: true do |f|

      = f.label :title, 'Schedule name'
      br
      = f.text_field :title, class: 'form-control'
      br

      = f.label :body, 'Schedule contents'
      br
      = f.text_area :body, class: 'form-control'
      br

      = f.label :start_date, 'Start date and time'
      br
      = f.datetime_select :start_date, {}, class: 'form-control datetime-form'
      br
      br


      = f.label :end_date, 'End date and time'
      br
      = f.datetime_select :end_date, {}, class: 'form-control datetime-form'
      br
      br

      = f.submit 'sign up', class: 'btn btn-success btn-block'

  .col-xs-3

② Arrange the design with CSS.

application.scss


//Postscript
.datetime-form {
  display: inline-block;
  width: auto;
}

Edit show.html.slim

slim:show.html.slim


.row
  .page-header
    h3
      |Schedule management

.row
  #calendar
  br

.row
  table.table.table-bordered
    tbody
      tr
        th.active
          |Schedule name
        td
          = @event.title
      tr
        th.active
          |Schedule contents
        td
          = @event.body
      tr
        th.active
          |Start date and time
        td
          = @event.start_date.to_s(:datetime_jp)
      tr
        th.active
          |End date and time
        td
          = @event.end_date.to_s(:datetime_jp)

.row
  - if @event.user === current_user
    .pull-right
      = link_to 'Schedule registration', new_event_path, class: 'btn btn-success'
      = link_to 'Edit', edit_event_path(@event), class: 'btn btn-primary'
      = link_to 'Delete', event_path(@event), method: :delete, data: { confirm: '本当にDeleteしますか?' }, class: 'btn btn-danger'

Edit ʻedit.html.slim`

slim:edit.html.slim


.row
  .col-xs-3

  .col-xs-6
    = form_with model: @event, url: event_path(@event), local: true do |f|

      = f.label :title, 'Schedule name'
      br
      = f.text_field :title, class: 'form-control'
      br

      = f.label :body, 'Schedule contents'
      br
      = f.text_area :body, class: 'form-control'
      br

      = f.label :start_date, 'Start date and time'
      br
      = f.datetime_select :start_date, {}, class: 'form-control datetime-form'
      br
      br


      = f.label :end_date, 'End date and time'
      br
      = f.datetime_select :end_date, {}, class: 'form-control datetime-form'
      br
      br

      = f.submit 'Save', class: 'btn btn-primary btn-block'

  .col-xs-3

Edit my_calendar.html.slim

slim:my_calendar.html.slim


.row
  .page-header
    h3
      |My calendar

.row
  = link_to 'Schedule registration', new_event_path, class: 'btn btn-success'

  #calendar
  br

Caution

If you do not disable turbolinks, the calendar may not be displayed, so be sure to disable it.

How to disable turbolinks