Introducing full calendar to Rails application

About this post

Introduced jQurery's Full Callendar to display a calendar in which you can write appointments in the Rails application you are currently creating. I hope it helps those who are looking for a way to display the calendar.

Prerequisites

The view is written in haml and SCSS. I'm using Rails "5.0.7.2".

command

I created an Event model with scaffold. When writing an appointment with FullCalender, it seems that it will not work unless the model name is ** Event ** </ font>.

$ rails g scaffold event title:string body:string start_date:datetime end_date:datetime
$ rails db:migrate RAILS_ENV=development

GemFile to be introduced

Write the following three ** bundle install **

gem 'jquery-rails'
gem 'fullcalendar-rails'
gem 'momentjs-rails'

Fill out the SCSS

Fill in the following in application.scss

app/assets/stylesheets/application.scss


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

JavaScript Please copy and paste as it is. This will display the calendar in Japanese.

app/assets/javascripts/application.js


//= require jquery
//= require moment
//= require fullcalendar

$(function () {
    //Detect screen transition
    $(document).on('turbolinks:load', function () {
        if ($('#calendar').length) {

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

            $(document).on('turbolinks:load', function () {
                Calendar();
            });
            $(document).on('turbolinks:before-cache', clearCalendar);

            //events: '/events.json',Added below
            $('#calendar').fullCalendar({
                events: '/events.json',
                //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'],
                //Button layout
                header: {
                    left: '',
                    center: 'title',
                    right: 'today prev,next'
                },
                //Display interval for events with 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'
                },
                // Drag & Drop & Resize
                editable: true,
                //Event time display to 24 hours
                timeFormat: "HH:mm",
                //Change the color of the event
                eventColor: '#87cefa',
                //Change the text color of the event
                eventTextColor: '#000000',
                eventRender: function(event, element) {
                    element.css("font-size", "0.8em");
                    element.css("padding", "5px");
                }
            });
        }
    });
});

How to display the calendar

It is displayed only with "#calendar" (when writing in HTML, write the div element with id calendar).

app/views/events/index.html.haml


%p#notice= notice
%h1 Events
%table
  %thead
    %tr
      %th Title
      %th Body
      %th Start date
      %th End date
      %th{:colspan => "3"}
  %tbody
    - @events.each do |event|
      %tr
        %td= event.title
        %td= event.body
        %td= event.start_date
        %td= event.end_date
        %td= link_to 'Show', event
        %td= link_to 'Edit', edit_event_path(event)
        %td= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' }
%br/
= link_to 'New Event', new_event_path
//This time I wrote it under the existing code.
#calendar

※important point Please turn off the turbolinks function.

app/views/layouts/application.html.haml


%body{"data-turbolinks" => "false"}
    = yield

Routing settings

Set the routing so that you can check it immediately after starting it.


Rails.application.routes.draw do
  root "events#index"
  resources :events
end

When you start the app with "rails s", the calendar should be displayed as below.

スクリーンショット 2020-05-21 20.35.06.png

Click New events to enter them and the events will be displayed on the calendar. Screenshot 2020-05-21 20.43.11.png You can check the details of the event by clicking the event on the calendar. スクリーンショット 2020-05-21 20.43.18.png

Impressions

By using the jQurery library, I was able to easily display the calendar. I would like to continue to actively use the library in the future.

References

https://qiita.com/syukan3/items/68280ce4ff45aa336363

Recommended Posts

Introducing full calendar to Rails application
Introducing CircleCI to Rails
Introducing Bootstrap to Rails 5
Introducing Bootstrap to Rails !!
Preparing to create a Rails application
Introducing React to Rails with react-rails
Introduce two-factor authentication to your Rails application
[Rails 6] Introducing Google Maps to your portfolio
The process of introducing Vuetify to Rails
[Rails] Introducing jquery
[Rails] Introducing devise
Introducing New Relic to Rails apps on Heroku
[Rails] Schedule management using Full Calendar Yesterday's implementation
Try deploying Rails application to EC2-Part 2 (Server construction)-
[Rails] Introducing pay.jp (from view customization to registration)
[Introduction] Try to create a Ruby on Rails application
About rails application server
[Rails] Introducing Active Hash
Introduce Vue.js to Rails
How to uninstall Rails
Introducing Rails6 + Bootswatch / Honoka
Rails6 I tried to introduce Docker to an existing application
[Rails] Create an application
What to do when you launch an application with rails
How to deploy a Rails application on AWS (article summary)
Implement application function in Rails
How to create an application
[rails] How to post images
rails new application launch command
Introducing AWS CLI to CentOS 7
[Rails] How to use enum
Introduction to Android application development
Introducing past nvidia-driver to Ubuntu
[Rails] How to install devise
[Rails] How to use enum
How to read rails routes
Introducing Bootstrap and Font-Awesome (Rails)
How to use rails join
Deploy your application to WildFly
[Rails] Add column to devise
View monthly calendar in Rails
How to terminate rails server
Rewriting from applet to application
How to write Rails validation
How to write Rails seed
[Rails] How to use validation
[Rails] How to disable turbolinks
Pass parameters to Rails link_to
[Rails] How to use authenticate_user!
[Rails] How to use "kaminari"
[Rails] How to implement scraping
[Rails] How to make seed
Introducing JITSI MEET to CentOS 8
How to write Rails routing
[Rails] How to install simple_calendar
Rails web server and application server
[Rails] How to install reCAPTCHA
Introduced gRPC client to rails
Introduction to RSpec-Everyday Rails Summary-
[Rails] How to use Scope
Ruby on Rails --From environment construction to simple application development on WSL2