[Rails] I tried to create a mini app with FullCalendar

Introduction

I wanted my app to have a function like Google Calendar, so I created a mini app with full calender.

table of contents

1. Application template
2. yarn add
3. MVC settings

Landing point

environment

ruby 2.6.5 rails 6.0.0 FullCalendar v5.3.1

Implementation

Let's implement it ~

1. Application template First, create a template for your application.

% 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.

2. yarn add It seems that you can automatically create "1 month calendar" or "event creation" by installing the necessary files as yarn add in the terminal.

Terminal.

% 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.

3 Added to JS

Add to the JS application file and load the yarn you just installed.

• Caution: Please note that the position of the directory will be different if the version is different.

app/javascript/packs/application.js

//abridgement

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)


//The description so far is automatically generated.
//Add the following

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

document.addEventListener('turbolinks:load', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin, interactionPlugin ]
  });

  calendar.render();
});

3. MVC settings

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.

config/routes.rb

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

app/controllers/events_controller.rb

class EventsController < ApplicationController
  def index
  end
end

app/views/events/index.html.erb

<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"!

[Rails] I made a simple calendar mini app with customized specifications.

https://qiita.com/AKI3/items/109d54a35c98328d9155

Finally

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 ~

reference

https://qiita.com/okayu_331/items/8c4ab42d27a8ac16da5b Official site https://fullcalendar.io/docs/plugin-index