[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

スクリーンショット 2020-10-26 17.29.43.png

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.

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

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.

スクリーンショット 2020-10-26 17.29.43.png

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

Recommended Posts

[Rails] I tried to create a mini app with FullCalendar
I tried to create a LINE clone app
I tried to create a padrino development environment with Docker
[Rails6] Create a new app with Rails [Beginner]
[Rails 5] Create a new app with Rails [Beginner]
[Rails] I made a simple calendar mini app with customized specifications.
I tried to create a simple map app in Android Studio
I tried to make a group function (bulletin board) with Rails
[Rails] rails new to create a database with PostgreSQL
I tried to break a block with java (1)
I tried to create a Clova skill in Java
How to get started with creating a Rails app
I tried to create a portfolio with AWS, Docker, CircleCI, Laravel [with reference link]
[First environment construction] I tried to create a Rails 6 + MySQL 8.0 + Docker environment on Windows 10.
[Rails / JavaScript / Ajax] I tried to create a like function in two ways.
[Azure] I tried to create a Java application for free-Web App creation- [Beginner]
I tried to create a shopping site administrator function / screen with Java and Spring
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
I tried to modernize a Java EE application with OpenShift.
Preparing to create a Rails application
I want to push an app made with Rails 6 to GitHub
Create a new app in Rails
I tried to make a message function of Rails Tutorial extension (Part 1): Create a model
I tried to interact with Java
I tried using Hotwire to make Rails 6.1 scaffold a SPA
I want to create a form to select the [Rails] category
A series of steps to create portfolio deliverables with Rails
[Rails] I tried to implement batch processing with Rake task
Try to create a server-client app
Tutorial to create a blog with Rails for beginners Part 2
[Azure] I tried to create a Java application for free ~ Connect with FTP ~ [Beginner]
Tutorial to create a blog with Rails for beginners Part 0
[Rails 6.0, Docker] I tried to summarize the Docker environment construction and commands necessary to create a portfolio
I tried to make a message function of Rails Tutorial extension (Part 2): Create a screen to display
I want to create a chat screen for the Swift chat app!
I want to add a browsing function with ruby on rails
I tried to implement the image preview function with Rails / jQuery
I tried to create a Spring MVC development environment on Mac
I tried to build a simple application using Dockder + Rails Scaffold
Rails Tutorial Extension: I tried to create an RSS feed function
I tried to get started with WebAssembly
[Rails withdrawal] Create a simple withdrawal function with rails
I tried playing with BottomNavigationView a little ①
I made a rock-paper-scissors app with kotlin
[rails] How to create a partial template
I made a rock-paper-scissors app with android
I tried to implement ModanShogi with Kinx
I tried to create an API to get data from a spreadsheet in Ruby (with service account)
[Rails] I tried to implement a transaction that combines multiple DB processes
I made an app to scribble with PencilKit on a PDF file
[iOS] I tried to make a processing application like Instagram with Swift
I tried to make a Web API that connects to DB with Quarkus
I tried to build a Firebase application development environment with Docker in 2020
I want to create a dark web SNS with Jakarta EE 8 with Java 11
Create a LINEnews-style tech news summary app with Rails x LineBot! [Part 1]
I tried to verify AdoptOpenJDK 11 (11.0.2) with Docker image
I tried to make Basic authentication with Java
Create a simple search app with Spring Boot
Downgrade an existing app created with rails 5.2.4 to 5.1.6
I tried to manage struts configuration with Coggle
[Rails] I tried to raise the Rails version from 5.0 to 5.2