simple calendarを使ってカレンダーを導入する

またまたスクールの最終課題で導入したものを書き残しておきます。
これがなかなか見た目的に面白く出来上がりました。
導入したものはこちら。

ユーザーのマイページにある「行ったカレンダー」というものです。
ユーザーが書いたレビューの訪問日にユーザーのアバターが表示されます。

手順

1. simple_calendar のgemをインストールする。
2. user model にstart_timeを定義する（3でイベントとカレンダーを結びつけるのに必要）
3. viewファイルを編集する
4. CSSファイルで見た目を整える

1. simple_calendar のgemをインストールする。

Gemfileに下記記述を追加。
Gemfile

gem "simple_calendar", "~> 2.0"

ターミナルでbundle installを実行する。

2. user modelにstart_timeを定義する

app/models/review.rb

def start_time
  self.visit_day
end

※visit_dayはreviewsテーブルのカラムの一つとして作成済み。（データ属性はdatetime）
下記3で再度登場します。

3. viewファイルを編集する

simple calendarは、カレンダー上に、登録したイベントを表示させることができます（例：●●さんとランチ　等）。
今回は、そのイベントタイトルの代わりにユーザーのアバター画像を表示させました。
viewファイルは下記のようにしました。

app/views/users/show.html.haml

= month_calendar events: @reviews do |date, reviews|
  = date
  - reviews.each do |review|
    .image-avatar
      = link_to shop_review_path(review.shop.id, review.id) do
        = image_tag review.user.avatar

順を追って解説していきます。
月カレンダーだけを表示させるためのviewは、

= month_calendar do |date|
  = date

とすれば済むのですが、カレンダー内にイベントを表示させるためには、上の記述に、「events: インスタンス変数」を追加する必要があります。
今回の場合は、ユーザーが投稿したレビューの訪問日カラムをカレンダーに結びつける必要があるため、コントローラで定義したインスタンス変数@reviewsを「events: インスタンス変数」の記述に使ってあげます。

events: @reviews

ちなみにUsersコントローラのshowアクション内に定義してあるインスタンス変数@reviewsはこちら。
app/controllers/users_controller.rb

def show
  @reviews = @user.reviews.includes(:shop)
end

次にユーザーのお店への訪問日にユーザーのアバター画像を表示させるための記述も追加してあげます。
eachでreviewsを展開。
「- reviews.each do |review|」



手順2でUserモデルでstart_timeを定義してvisit_dayをカレンダー日付と結びつけました。
それぞれのインスタンス「review」はデータ属性がDateTimeの:start_timeを持っている必要があり、
そのstart_timeを元にカレンダーの日付とイベント（ここではreview）とが結び付けられ表示されます。
なので、手順2で定義したstart_timeにより、reviewとカレンダーがvisit_day(訪問日)により結びつき、表示されることになります。

  = month_calendar events: @reviews do |date, reviews|
    = date
    - reviews.each do |review|
      .image-avatar
        = link_to shop_review_path(review.shop.id, review.id) do
          = image_tag review.user.avatar

「= image_tag review.user.avatar」
これでeachで展開されたreviewインスタンスに紐づくuserのavatarをDBから取り出し表示できます。

※「= link_to shop_review_path(review.shop.id, review.id) do」は、表示されたアバターを該当レビューページへのリンク化しています。

4. CSSファイルで見た目を整える。

下記の様な雛形が用意されているため、そちらを使って見た目を整えれば完成です！

app/assets/stylesheets/_simple_calendar.scss

.simple-calendar {
  .day {}

  .wday-0 {}
  .wday-1 {}
  .wday-2 {}
  .wday-3 {}
  .wday-4 {}
  .wday-5 {}
  .wday-6 {}

  .today {}
  .past {}
  .future {}

  .start-date {}

  .prev-month {}
  .next-month { }
  .current-month {}

  .has-events {}
}

参考にしたページ

How to use Simple Calendar Rails gem · GitHub
Simple calendar by excid3