はじめに

オリジナルアプリに月間カレンダーを表示するまでを記録しておく。
カレンダー機能はSimpleCalendarやFullCalendarを使う方法がある。
今回は、SimpleCalendarを導入していく。

目次

1.Simple Calendarをインストール
2.Simple CalendarのViewの生成
3.カレンダーに予定を追加
4.カレンダーを表示

1.Simple Calendarをインストール

Gemfileに「gem ‘simple_calendar’, ‘~> 2.0’」を追加

アプリののディレクトリでbundle installを実行

2.Simple CalendarのViewを生成する

Gemをインストールしただけではカレンダーを表示させることができないため、viewを生成させる。

コマンドを実行

$ rails g simple_calendar:views

フォルダ、ファイルが生成される。

カレンダーにCSSを適用させる
application.css のファイルに *= require simple_calendar を追記する

3.カレンダーに予定を追加

scaffoldを使用してeventというモデルを作成

コマンドを実行

$ rails g scaffold Event name start_time:datetime

データベースを変更させるため、マイグレーションを実行

$ rails db:migrate

4.カレンダーを表示

scaffoldを使用したため、index.html.erb のファイル内にコードが記述されているが、編集していく。
eventsフォルダ内の index.html.erb のファイルを書き換え。

<%= month_calendar events: @events do |date, events| %>
  <%= date %>

  <% events.each do |event| %>
    <div>
      <%= event.name %>
    </div>
  <% end %>
<% end %>

見た目を修正し、月間カレンダーの表示に成功

参考

【公式ドキュメント】simple_calendar
【rails】simple_calendarを使ってカレンダーつきのブログ機能を作ってみた。
[Rails] Simple Calendarでカレンダーを表示させよう!