Railsでsimple_calendarを使って月ごとのカレンダーを実装したい

やりたいこと

Railsでsimple_calendarを使って、月ごとのカレンダーを作成したい。

手順

  1. simple_calendarをインストール
  2. viewでカレンダーを表示させる
  3. カレンダーに任意のデータを入れる
  4. デザインをカスタマイズする

実装

1 simple_calendarをインストール

Gemfileにsimple_calendarを追記します。

Gemfile

gem 'simple_calendar', '~>2.0'

以下コマンドでインストールします。

bundle install

2 viewでカレンダーを表示させる

カレンダーを表示させたいviewファイルに以下コードを記述します。

<%= month_calendar do |date| %>
 <%= date.day %>
<% end %>

これで月ごとのカレンダーが表示されます。

この時点では、デザインは全くついていません。

3 カレンダーに任意のデータを入れる

コントローラーからデータを渡すことで任意のデータをカレンダー内に入れることができます。

日付に紐づいた情報を入れたい場合は、カラム名がstart_timeのdatetime型を含むテーブルをDBに作成してください。

start_timeの値を参照して、カレンダーの同一の日付にデータを入れます。

viewファイルは以下のように修正します。

<%= month_calendar events: @plans do |date, plan| %> //@plansの部分はコントローラーから渡ってきた値に変換する
 <%= date.day %>
 <%= plan.title %>
<% end %>

これでカレンダー上に任意の値が表示されます。

4 デザインをカスタマイズする

以下コマンドでsimple_calendarに関わるviewファイルを入手できます。

rails g simple_calendar:views

このファイルを修正したり、cssを追加したりすることでデザインをカスタマイズすることができます。

 

以上!!!!!!!