目次
- 概要
- 完成イメージ
- 導入
- オプション設定
- 後から導入する手順
- 参考記事
概要
簡単にカレンダー機能を実装できる、simple_calenderの実装方法と注意点をご紹介したいと思います。
仕様をしっかりと確認せず各種記事のみを見ていたためカレンダーの予定が表示されませんでした。難しい箇所がないだけに原因が分からず悩まされました。（後述）
なお、公式のGithubには丁寧に書いてあります。自分の目で確認することが必要ですね。
公式はこちら
完成イメージ
導入
###前提
まずはご自身の仕様を確認しましょう。
カレンダー上に予定を入れるには当然その予定の日付データが必要ですよね。
simple_calenderのデフォルトの設定では、start_time、end_timeというカラム名のものを読み込んで表示しています。
start_timeは予定の開始日、end_timeは予定の終了日を指します。
なお、予定が一日で完結するものであればend_timeは不要です。
###カレンダー表示まで
gem "simple_calendar", "~> 2.4"
まずはbundle installしましょう。次にapplication.scssへ下記を記載してください。
*= require_tree .
*= require_self
*/
@import "simple_calendar"; #今回追記
application.cssなら代わりにこちらを。
*= require simple_calendar #今回追記
*= require_tree .
*= require_self
*/
これで準備が整いました。まずはカレンダーを表示させます。
表示させたいviewにこのコードを埋め込むだけです。サンプルではpractices/index/html/erbとしています。
<%= month_calendar do |date| %>
<%= date %>
<% end %>
###予定を表示させる
先ほどのコード修正します。
サンプルでは@practicesに予定の一覧を、practice.placeで実施場所を取得しています。
<%= month_calendar(events: @practices) do |date, practices| %>
<%= date.day %>
<% practices.each do |practice| %>
<div>
<%= practice.place %>
</div>
<% end %>
<% end %>
7~9日にはstart_timeに7日、end_timeに9日のデータを入力してみました。
##オプション設定
###日曜日始まりに変更
config.beginning_of_week = :sunday
再度rails sを行うと反映されます。
###カレンダーの編集
rails g simple_calendar:views
該当のviewを編集します。(今回はmonth_calender)
###CSSの変更
項目はsimple_calenderのもの、設定は私が行ったものです。
// カレンダーの設定
.simple-calendar {
.day {
background: #fff9ee;
}
.wday-0 {
background: #ffeaea;
color: #ff505c;
}
.wday-1 {}
.wday-2 {}
.wday-3 {}
.wday-4 {}
.wday-5 {}
.wday-6 {
background: #d4ebff;
color: #5984dc;
}
.today {
background: #FFA0A0;
}
.past {}
.future {}
.start-date {}
.prev-month {}
.next-month {}
.current-month {}
.has-events {}
}
/* ホバーした際の背景色 tableタグにcalender_tableクラスを追記しています*/
.calendar-table tr td:hover {
background-color: #FFFF8c;
}
後から導入する手順
start_timeなんてカラム名作ってないよ！！！
と思ったあなた。大丈夫です。
ここからはデフォルト設定以外の導入方法をお伝えしていきます。
###カラム名がstart_time,end_timeではない場合
attribute、end_attributeでどのカラムが日付データを保持しているのか明示してあげます。
サンプルだとstart_atが開始日の意味合いを持つカラム、end_atが終了日にあたります。
冒頭記載のとおり、終了日は必須ではありません。その場合は``end_attribute: :end_at`は削除してください。
<%= month_calendar(attribute: :start_at, end_attribute: :end_at, events: @practices) do |date, practices| %>
<%= date.day %>
<% practices.each do |practice| %>
<div>
<%= practice.place %>
</div>
<% end %>
<% end %>
date型で作っていた場合
datetime型で作成しましょうという記事が散見されますが、試してみたところdatetime型、date型どちらでも問題なく表示されました。
公式のUsage内では確かにdatetime型で作成していますが、絶対条件ではないものと思われます。
振り返り
仕様を理解していれば手軽にカレンダーが表示できるGemです。
これ以来公式のUsageを確認する癖をつけてくれた思い出深い出来事となりました。
よく分からないけど勝手に日付データ取得してくれるんだな、というあまりに安易な考えで導入したため原因の発覚に時間を要してしまいました。
今回ご紹介したもの以外にもオプションはありますのでぜひ確認してみてください。
date型では表示されなかったなどありましたらぜひご教示ください。
最後までご覧頂きありがとうございました。
参考記事
https://github.com/excid3/simple_calendar
https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0