I wanted my app to have a function like Google Calendar, so I created a mini app with full calender.
ruby 2.6.5 rails 6.0.0 FullCalendar v5.3.1
Let's implement it ~
% cd projects % rails _6.0.0_ new fullcalender_app -d mysql % cd fullcalender_app % rails db:create
The version of rails is 6.0.0.
% yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction
@fullcalendar Below are the names of each function. The articles that I referred to are listed below, so please refer to them if you like.
success Saved lockfile. success Saved 4 new dependencies. info Direct dependencies ├─ @fullcalendar/[email protected] ├─ @fullcalendar/[email protected] └─ @fullcalendar/[email protected] info All dependencies ├─ @fullcalendar/[email protected] ├─ @fullcalendar/[email protected] ├─ @fullcalendar/[email protected] └─ [email protected] ✨ Done in 3.55s.
If you see this, you are successful.
Add to the JS application file and load the yarn you just installed.
Then create the routing, controller and view.
% rails g controller events index
Create an events controller. By writing index after events, routing will be set automatically and the view will be created. Edit if you want to use resources for routing.
Running via Spring preloader in process 42254 create app/controllers/events_controller.rb #Controller creation route get 'events/index' #Routing settings invoke erb create app/views/events create app/views/events/index.html.erb #View creation invoke test_unit create test/controllers/events_controller_test.rb invoke helper create app/helpers/events_helper.rb invoke test_unit invoke assets invoke scss create app/assets/stylesheets/events.scss
I will edit it in detail while looking at each one.
Rails.application.routes.draw do # get 'events/index'← This may be deleted # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html #This is the default #Edit below root to: "events#index" resources :events end
class EventsController < ApplicationController def index end end
<h1>Events#index</h1> <p>Find me in app/views/events/index.html.erb</p> <%#Up to this point, the description is automatically generated.%> <%#Below is the drawing part of the calendar%> <div id='calendar'></div>
$ rails s
Start the server and check.
The minimum look is complete! !!
You can customize it in various ways by using a plug-in.
However, only the "full calendar" is fully equipped with only the plug-in, and you cannot make small changes. (There may be a way, but ...) Personally, I would like to change the specifications in a little more detail, so I will try the "Simple Calendar"!
I am a beginner in programming, but I am posting an article in the hope that it will help people who are similarly troubled. See you next time ~
https://qiita.com/okayu_331/items/8c4ab42d27a8ac16da5b Official site https://fullcalendar.io/docs/plugin-index