はじめに
自分のアプリにGoogleカレンダーみたいな機能が欲しかったので、fullcalenderでミニアプリを作成してみました。
目次
- アプリケーションの雛形
- yarn add
- MVCの設定
着地点
環境
ruby 2.6.5
rails 6.0.0
FullCalendar v5.3.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を読み込みます。
※注意:バージョンが違うとデレクトリの位置が違うので注意してください。
//省略
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
一つ一つ見ていきながら細かく編集していきます。
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
class EventsController < ApplicationController
def index
end
end
<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