[Rails] Schedule management using Full Calendar Yesterday's implementation
Target
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]
(1) As a measure against turbolinks, prepare a function to read the calendar and a function to delete it.
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.
Recommended Posts