はじめに
👋こんにちは！Web系の企業に勤務し、地方からフルリモート勤務をしている@takakouと申します🏙️✨
今回は、「Simple Calendarをカラム追加無しで、既存のモデルに実装してみよう」というテーマで記事をシェアします！📝
この記事を執筆しようと思った経緯としては、私自身が Simple Calendar の実装をしている記事では、なぜ新規のカラム、モデルを追加する記事しかないのか疑問に思ったからです。💡
そこで、同じ疑問を持つ方の解消ができればと思い執筆しました🌟
記事執筆は未熟者で、至らない点もあるかと思いますが、皆さんのコメントやフィードバックをお待ちしています！🚀💬
目次
1. 対象者
- スクールなどで課題として出されている、 Simple Calendar を実装したいだけの方
- 既存のアプリケーションに カレンダー表示機能 を導入したいが、 新しいカラムやモデル を追加することなく、簡単 に実装したい場合
- 他の記事を見てカラムやモデルを追加する行為 に疑問を持った方
- 公式リファレンス(英語) を読むことに苦手意識がある方
2. 動作環境
端末
-
PC : MacBook Air(M1,2020)
-
RAM : 8GB
-
OS : macOS Monterey(ver12.1)
バージョンなど
-
Ruby : 3.1.2
-
Rails : 6.1.7
3. 前提知識
こちらの章では、記事を読んでいく上で必要な前提知識について軽く説明をしていきます。
そもそもSimple Calendarとは
- カレンダー表示機能を簡単に実装できるようにしてくれる gem です。
- 簡単に、カスタマイズが可能 なカレンダーを実装することが可能です。
(画像参照元)
デメリット
- 拡張性 がない。
- 高度な機能(ドラッグして予定日時変更等) を利用するのに適していない。
デメリットを克服したい場合
fullcalendarというgemを用いることになります。
必要なカラムは?
- Simple Calendar はデフォルトで start_time というカラムを使用します。
- 既存のモデルに組み込む場合や、新しくモデルを作成する場合は start_time というカラムを追加する場合があります。
どんな時に使うからそのカラムが必要？
- start_time が必要なときは、予約機能やタスク管理機能などで、日時を指定 してデータを登録しておきたい時です。
データの登録日時のカレンダーで良い場合は？
- start_time というカラムは必要なくなります。
既存のカラムを使いたい場合は？
- start_time というカラムは必要なくなります。
追加カラムなしで実装する方法は？
- 今回の記事で説明していきます。
- よくあるSimple Calendarの記事 は見飽きたという方は、通常の導入手順等は、飛ばして読んでもらっても問題ないです。
4. 導入手順
こちらの章では導入手順について説明していきます。
前提
公式のGithubを参考にしています。
導入手順(共通)
- こちらの段落では、共通で必要な手順を説明しています。
simple calendarのgemを追加する
Gemfileにsimple calendarのgemを追加、その後 bundle install
+ gem "simple_calendar", "~> 2.4"
カレンダーのCSSを追加
app/assets/stylesheets/application.scssに記述を追加
+ @import "simple_calendar";
導入手順(予約機能等々)
- こちらの段落では、よくある 予約機能等 を追加したい場合でモデルを新規で作成し、カラムとして、start_time を追加した場合について説明をします。
- ここの手順がよく記事で見るやつです。
新規カラム、もしくはモデルを追加
今回は新規のモデルを追加してみます。
$ rails g scaffold Meeting name start_time:datetime
migrationファイルが生成されたら下記コマンドで反映させます。
$ rails db:migrate
viewに記述追加
+ <%= month_calendar(events: @meetings) do |date, meetings| %>
+ <%= date %>
+
+ <% meetings.each do |meeting| %>
+ <div>
+ <%= meeting.name %>
+ </div>
+ <% end %>
+ <% end %>
カラム追加なしの導入手順
-
次は追加のモデル、カラム追加なしでの手順を説明していきます。
-
今回は既に 自作のモデル(コード例ではBookモデル) が実装されており、完成したアプリケーションに Simple Calendar の実装をする前提とします。
-
カレンダーを使う意図としては データを登録した日を表示したいだけ のカレンダーを実装することとします。
-
モデルに timestamps を付与してある際に自動生成される
created_at(作成日時)のデータに基づいてカレンダーに表示するとします。 -
方法が二つあるので好きな方で実装していただけたらと思います。
方法①
モデルファイルに start_time というメソッドを定義します。
注意点
Githubにはオプションが用意されているから、あえてメソッドを定義しなくて良いと書かれていますが、複数ページにまたがって、カレンダーを使う際、オプションの設定をいちいちするのが面倒な時に使ってみると良いと思います。
+ def start_time
+ created_at
+ end
view は通常通りです。
<%= month_calendar(events: @meetings) do |date, meetings| %>
<%= date %>
<% meetings.each do |meeting| %>
<div>
<%= meeting.name %>
</div>
<% end %>
<% end %>
方法②
- 次に別の方法で カラム追加なし の実装をします。
- viewsに記述した、
month_calendarのオプションにattribute: :created_atを追加します。
+ <%= month_calendar(events: @meetings, attribute: :created_at) do |date, meetings| %>
<%= date %>
<% meetings.each do |meeting| %>
<div>
<%= meeting.name %>
</div>
<% end %>
<% end %>
5. 参考文献
6. おわりに
今回の記事では、 Simple Calendar を実装してみたい時に、カラムの追加、モデルの追加をしない方法について説明しました💾
今回の実装方法を使えば、既存の他の名前をしているカラム(datetime型) での Simple Calendar の実装ができるので試していただけたらと思います。
Simple Calendarを実装する必要があるけど、カラムやモデルは追加したくない！試してみたいだけ！という方のお力になれたのであれば僕としてはとても嬉しいです。👍
もし興味を持っていただけましたら、ぜひ他の記事も読んでいただけるとうれしいです！ 📖🌟
(最後に、気づいた方もいらっしゃると思うのですが、絵文字を入れるのは苦手なので、文章に沿った絵文字を挿入するのに、ChatGPTを利用させていただきましたが、いかがでしたでしょうか。不快に思われた方がいたら申し訳ございません 🙇♂️)