【Rails】フルカレンダー（FullCalendar）でミニアプリを作成してみた

はじめに

自分のアプリにGoogleカレンダーみたいな機能が欲しかったので、fullcalenderでミニアプリを作成してみました。

目次

1. アプリケーションの雛形
2. yarn add
3. MVCの設定

着地点

環境

ruby 2.6.5
rails 6.0.0
FullCalendar v5.3.1

実装

それでは実装してみます〜

1. アプリケーションの雛形 まずはアプリケーションの雛形を作ります。

% cd projects 
% rails _6.0.0_ new fullcalender_app -d mysql
% cd fullcalender_app 
% rails db:create

railsのバージョンは6.0.0で作成してます。

2. yarn add

ターミナルでyarn addとして必要なファイルをインストールすると「1ヶ月カレンダー」とか「イベント作成」とかを自動で作れるみたいです。

ターミナル.

% yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

@fullcalendar以下がそれぞれの機能名です。下記に参考にさせていただいた記事を載せてるので、よかったら参考にしてください。

success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
├─ @fullcalendar/core@5.3.1
├─ @fullcalendar/daygrid@5.3.2
└─ @fullcalendar/interaction@5.3.1
info All dependencies
├─ @fullcalendar/core@5.3.1
├─ @fullcalendar/daygrid@5.3.2
├─ @fullcalendar/interaction@5.3.1
└─ preact@10.5.5
✨  Done in 3.55s.

これが表示されれば成功です。

3 JSに追記

JSのapplicationファイルに追記して先ほどインストールしたyarnを読み込みます。

※注意：バージョンが違うとデレクトリの位置が違うので注意してください。

app/javascript/packs/application.js

//省略

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)


//ここまでは自動で生成されてる記述。
//以下を追加

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の設定

続いてルーティングとコントローラーとビューを作成します。

% rails g controller events index

eventsコントローラーを作成します。eventsの後にindexを記述することで、自動でルーティングが設定されて、ビューが作成されます。ルーティングにresourcesを使う場合は編集してください。

Running via Spring preloader in process 42254
      create  app/controllers/events_controller.rb　#コントローラー作成
       route  get 'events/index' #ルーティング設定
      invoke  erb
      create    app/views/events
      create    app/views/events/index.html.erb #ビュー作成
      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

一つ一つ見ていきながら細かく編集していきます。

config/routes.rb

Rails.application.routes.draw do
  # get 'events/index' ←これは削除しても良い
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html

  # ここまでがデフォルト
  # 下記に編集
  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>
<%# ここまでは自動で生成された記述。 %>
<%# 以下がカレンダーの描画部分 %>
<div id='calendar'></div>

$ rails s

サーバーを立ち上げて確認します。

最低限の見た目は完成してました！！

プラグインをするといろいろカスタマイズ可能です。

ただ、「フルカレンダー」だけに、プラグインのみで全てがフル装備されてしまって、細かな変更ができません。（やり方があるかもしれませんが、、、）
個人的には、もう少し詳細に仕様を変更したいので「シンプルカレンダー」の方を試してみます！

【Rails】Simple Calendarのミニアプリをカスタマイズ仕様で作ってみた

最後に

私はプログラミング初学者ですが、同じ様に悩んでる方々の助けになればと思い、記事を投稿しております。
それでは、また次回お会いしましょう〜

参考

https://qiita.com/okayu_331/items/8c4ab42d27a8ac16da5b
公式サイト
https://fullcalendar.io/docs/plugin-index