Simple-calendarを使ってカレンダーをカスタマイズする方法 【Rails】【初心者向け】
Simple -calendarのカスタマイズで非常に苦労したので書き残しておきます。
Simple-calendarの導入はうまくできたものの、
既存のテーブルと照らし合わしてそのレコードがある日だけ背景色を変えるという実装が難しかったです。いや今でもあんまりわかってない、ただ実装はできました。
カスタマイズした結果がこちら。
https://gyazo.com/0abdfbac226e41cc7e8df189895004ba
手順
- simple-calendarのgemをインストール
- Trainingテーブルにstart_time(date属性)を追加
- viewを編集
- cssファイルを編集
1.simple-calendarのgemをインストール
ターミナルで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は、カレンダー上に登録したイベントを表示する。
背景色を変えたいだけなので、イベントは関係なさそうに思うがしっかり関係している。ユーザが何月何日にトレーニングしたかというイベントの背景色を変えることで達成できそう。
以下がカレンダーのビューファイル。
4.cssファイルを編集
最後にイベントが追加された箇所(class = "has_events)に背景色のプロパティを与える。
未だに不明な点
・simple-calendarのeventsが、trainings テーブルのstart_time(date属性)をどうやってこいつがイベントの日にちに該当する値だなと判断しているかが不明
ただdate属性のカラムを参照するから?
・イベントが追加された要素にhas_eventsクラスが付与されるが、それはどこから知り得るか?(私はtwitterで先輩エンジニアにご教授いただきました。)simple_calendarのビューファイルを見てもその記述がなかったので。