railsでカレンダー機能を実装する方法

#はじめに
　この記事はプログラミング学習の備忘録です。
　現在習慣化アプリを実装中です。その中でsimple_calendarを使って簡単にカレンダー機能を実装する方法について学んだので紹介します。

#実装の目標
①以下のようなカレンダーを導入する
②タスクを記録したら、カレンダーが緑色になるようにする
[![Image from Gyazo](https://i.gyazo.com/99f90661b07a347092af44ad610d1197.png)](https://gyazo.com/99f90661b07a347092af44ad610d1197)

#gemfileを導入　
・gemfileに以下の記述をします。

```
　gem 'simple_calendar', '~> 2.0' 
```

その後忘れずに、bundleinstallしましょう。

これでgemfileの導入は完了です。

#モデルの設定をする
　以下のようにモデルを設定します。今回はテストなのでシンプルな形で作ります。
マイグレーションファイルに以下のように記述して、「rails db:migrate」します。

```
t.string :title
t.text :content
t.datetime :start_time
t.timestamps
```
注意点としては、**t.datetime :start_time**の部分です。
start_timeで入力された日時をもとにカレンダーと紐付けます。
従って、「投稿内容をカレンダーに反映させる処理」を実装する場合には、
datetime型のstart_timeカラムを作る必要があります。

#viewに表示させる
次にsimple_calendarの保有するメソッド「month_calendarメソッド」を使って、月毎のカレンダーを表示させます。

``` index.html.erb
<%= month_calendar do |date| %>
  <%= date.day %>
<% end %>
```
すると以下のようなカレンダーが表示されます。

[![Image from Gyazo](https://i.gyazo.com/2b013760acc8033e213ad1a3895ed4f5.png)](https://gyazo.com/2b013760acc8033e213ad1a3895ed4f5)

デフォルトなのでシンプルです。

#投稿フォームを作る
　次に投稿を行うためのフォームを作ります。

```new.html.erb
<%= form_with(model: @event, local: true) do |form| %>

  <div class="title">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="time">
    <%= form.label :start_time %>
    <%= form.datetime_select :start_time %>
  </div>

  <div class="content">
    <%= form.label :content %>
    <%= form.text_field :content %>
  </div>


  <div class="submit">
    <%= form.submit %>
  </div>

<% end %>
```
注目して欲しいのは、 **<%= form.datetime_select :start_time %>**です。
この記述でカレンダーと紐づけるための日時用のフォームを作っています。

[![Image from Gyazo](https://i.gyazo.com/a0e14eefa74b3023958ce68a4040c1a4.png)](https://gyazo.com/a0e14eefa74b3023958ce68a4040c1a4)

#カレンダーと投稿を紐づける

次にviewのカレンダーを修正します。

```index.html.erb
<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>

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

datetime型のstart_timeカラムをもとにカレンダーと紐付けます。
実行すると以下の表示になります。

[![Image from Gyazo](https://i.gyazo.com/6e86fffb651471bf74f87c26c7d8c61c.png)](https://gyazo.com/6e86fffb651471bf74f87c26c7d8c61c)

無事25日の場所に、無事に投稿内容を出現させる事ができました。

#レイアウトを整える
　次にデフォルト表示のレイアウトを整えます。
ターミナルで以下のコマンドを実行します。

```
rails g simple_calendar:views
```

するとレイアウトを整えるためのviewファイルが生成されます。
このままだと特に何も変化はないので、
**stylesheets/application.css**に以下のコードを追記します。

```
*= require simple_calendar 
```
ページを更新すると、
[![Image from Gyazo](https://i.gyazo.com/95f7d6cda031c6d3beb07c30a665a06d.png)](https://gyazo.com/95f7d6cda031c6d3beb07c30a665a06d)

レイアウトを整える事ができました！

ここまでで、基本的なカレンダーの実装は完了です。

#投稿すると緑色になる実装
　最後に投稿すると緑色になり、継続率が分かるようにします。（習慣化アプリなどでよく実装されているものです）

scssファイルに以下のように記述します。
このフォーマットはsimple_calendarのreadmeからコピペできます。
https://github.com/excid3/simple_calendar/blob/master/README.md

```
.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 {
   background: #98fb98;
 }
}
```
注目して欲しいのは、**.has-events に背景色を指定しているところ**です。

この記述によって背景色が変化します。

[![Image from Gyazo](https://i.gyazo.com/6a5c3979da1a0a45d6d80484295be3b1.png)](https://gyazo.com/6a5c3979da1a0a45d6d80484295be3b1)

これで、継続率が分かる実装ができました！

#まとめ
　今回はsimple_calendarを使ってカレンダー機能を導入する方法についてまとめました。
最初は難しそうだなと思っていたのですが、想像以上に簡単に実装する事ができました。
カスタマイズすれば、更に使いやすいカレンダーができると思うので、進展があればまた記事にまとめます。

参考文献
https://qiita.com/AKI3/items/109d54a35c98328d9155