[Rails]simple_calenderの導入と実装

はじめに

簡単なカレンダー機能を実装したのでこちらでアウトプットします。
なお、コントローラやモデル、入力フォームといった部分は割愛しております。

成果物イメージ

#実装

今回は、Simplecalendarというgemを導入して実装していきます
早速はじめていきましょう

まずはgemを導入します。

gem 'simple_calendar', '~> 2.0'

※bundle installを忘れずに！！！

実は、極論これで完成といっても過言ではないです（笑）

ビューには以下を記載します。

index.html.erb

<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>
   <% events.each do |event| %>
    <div class="title">
      <%= event.title%>
    </div>
  <% end %>
<% end %>

一行目のmonth_calendarの部分は月間カレンダーであることを示します。
ここを、週間カレンダーにしたい場合はweek_calendarとしてやればOKです。

なお、これらの詳しいビューについては以下のコマンドを叩くと生成できます。

rails g simple_calendar:views

個人的には、Googleの検証モードを使用してみてあげるのもわかりやすいかなと思います。

あとは、bootstrapの導入と個人的にCSS等で調整してあげれば成果物のような物が完成します。

個人的に苦しんだ部分を共有（CSS)

以上のようにカレンダー機能自体を実装することは簡単なのですが、デザインのところでかなり苦戦してしまいました。というのも、予定を入力した場合に、各日付のセル幅が、予定の内容の長さによって変わってしまい、カレンダーのデザインが崩れてしまいました。固定幅にするだけ！と鷹を括っていましたが、なぜかうまくいかず、、、

いろいろ調べてみたところ、以下のようにすると解決できました！！

calendar.scss

.table {
　#省略
  table-layout: fixed;
}

table-layoutでtableの列幅を指定します。fixedとするとことで、各列を均等の幅にしてくれます。

#おわりに
ざっくりとした導入の流れを記載いたしました。おそらく、触りながらの方が理解が早いかと思いますので、まずは実際にやってみることからお勧めします！