Simple-calendarを使ってカレンダーをカスタマイズする方法 【Rails】【初心者向け】

Simple -calendarのカスタマイズで非常に苦労したので書き残しておきます。

  

Simple-calendarの導入はうまくできたものの、

既存のテーブルと照らし合わしてそのレコードがある日だけ背景色を変えるという実装が難しかったです。いや今でもあんまりわかってない、ただ実装はできました。

 

カスタマイズした結果がこちら。

https://gyazo.com/0abdfbac226e41cc7e8df189895004ba

 

手順

  1. simple-calendarのgemをインストール
  2. Trainingテーブルにstart_time(date属性)を追加
  3. viewを編集
  4. cssファイルを編集

 

1.simple-calendarのgemをインストール

gem "simple_calendar", "~> 2.0"

ターミナルでbundle install

 

2.Trainingテーブルにstart_time(date属性)を追加

ユーザが何月何日にレーニングしたか、をsimple-calendarと紐付けさせたい。

なぜ、date属性かというと、simple-calendarのeventsが持つ日にちのデータ属性はdate(もしくはdatetime?ここ曖昧です。)だから。

 

3.Viewファイルを編集

rails g simple_calendar:views をターミナルで実行し、作成されたビューファイルからベースを取り出し、cssファイルで

Simple-calendarは、カレンダー上に登録したイベントを表示する。

背景色を変えたいだけなので、イベントは関係なさそうに思うがしっかり関係している。ユーザが何月何日にレーニングしたかというイベントの背景色を変えることで達成できそう。

以下がカレンダーのビューファイル。 

= month_calendar events: @trainings do |date,trainings|
= date
- trainings.each do |training|
.done-training
- training.done

 

4.cssファイルを編集

最後にイベントが追加された箇所(class = "has_events)に背景色のプロパティを与える。

 

 

未だに不明な点

・simple-calendarのeventsが、trainings テーブルのstart_time(date属性)をどうやってこいつがイベントの日にちに該当する値だなと判断しているかが不明

ただdate属性のカラムを参照するから?

 

・イベントが追加された要素にhas_eventsクラスが付与されるが、それはどこから知り得るか?(私はtwitterで先輩エンジニアにご教授いただきました。)simple_calendarのビューファイルを見てもその記述がなかったので。