はじめに

アプリ開発でカレンダーを用いた実装をしたかったので簡単にまとめました。

simple_calendarとは

simple_calendarとは、簡単にカレンダー機能を付け加えれるgemです。
月間カレンダー、週間カレンダーなど日付指定をしてカレンダーを作成することができます。
今回は月間カレンダーを用いた方法となっております。

目次

1. simple_calendarのインストール
2. simple_calendarのビューの生成
3. カレンダーを表示
4. カレンダーのレイアウトの変更
5. おまけ

1. simple_calendarのインストール

gemファイルに以下を追記し、アプリケーションのディレクトリで「bundle install」を実行します。

gem "simple_calendar", "~> 2.0"

2. simple_calendarのビューの生成

simple_calendarのビューファイルを生成するために、以下のコマンドを実行します。
レイアウトをカスタマイズしたいときはこのコマンドでファイルを生成することで編集ができるようになります。

ターミナル

rails g simple_calendar:views

3. カレンダーを表示

モデルの編集

カレンダーにイベントを表示させるために以下をモデルに追記します。
「date」の部分はカラム名を記述します。

def start_time
  self.date
end

ビューファイルの編集

カレンダーを表示させるために、以下を記述します。
「events」の部分は、コントローラーで設定したインスタンス変数を置くことでデータを引っ張ってきます。
これでカレンダー上にイベントを表示させることができます。

<%= month_calendar events: @all do |date, all| %>
  <%= date.day %>　//カレンダー上の日程の表示の仕方
  <% all.each do |i| %>
    <div>
      <%= i.price %>
    </div>
  <% end %>
<% end %>

<%= date %>だと2020-01-01のように出力されます。
今回は日付だけを表示させたいので<%= date.day %>と記述しています。

その他ファイルの編集

simple_calendarのCSSを適用させるために、application.cssに「*= require simple_calendar」を追記します。

/*
 *= require simple_calendar #ここに追記します
 *= require_tree .
 *= require_self
 */

4. カレンダーのレイアウトの変更

以下のようにファイルを作成しCSSを自分で記述することで、カレンダーのデザインをカスタマイズすることができます。

.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 {}
}

5. おまけ

inputタグでカレンダーを使いたいときは以下のように 「f.date_field」で表示させることができます。

<%= form_with model: @income, local: true do |f| %>
  <%= f.date_field :date, id:"date" %>
<% end %>

参考リンク

https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0
https://github.com/excid3/simple_calendar