🦔

gem:simple_calendarを使ってカレンダーを表示

2023/08/16に公開

JavaScript

Rails

Ajax

tech

はじめに

このgemを使用して、シンプルなカレンダーをポートフォリオに実装しました。
記述は省きますが、表示させたい投稿のdatetimeのカラム名をstart_timeにしないとエラーが発生します。

t.datetime :start_time

SimpleCalendarのgemを追加

gem "simple_calendar", "~> 2.4"

その後、bundle installを行う。

viewにカレンダーを表示

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

<%= month_calendar events: post_records do |date, post_records| %>
  <%= date.day %>
  <% post_records.each do |post_record| %>
  <div class="calendar-text">
    <%= link_to post_record.training_name, post_record_path(post_record) %>
  </div>
  <% end %>
<% end %>

上記2文で月ごとのカレンダーが表示されます。
また、カレンダー内に任意のデータを入れることもできます。
今回は、投稿したトレーニング名を表示させました。

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

rails g simple_calendar:views

このコマンドでsimple_calendarに関わるviewファイルを入手できます。
このファイルを修正したり、cssを追加したりすることでデザインをカスタマイズすることができます。
簡素ですが、このような表示になります。

非同期通信化

カレンダーの月をめくるボタンを非同期化しました。

1.remote: trueを追加

app/views/simple_calendar/_month_calendar.html.erb

<div class="calendar-heading">
    <%= link_to t('simple_calendar.previous', default: '<<'), calendar.url_for_previous_view, remote: true %>
    <span class="calendar-title"><b><%= start_date.year %>年 <%= t('date.month_names')[start_date.month] %></b></span>
    <%= link_to t('simple_calendar.next', default: '>>'), calendar.url_for_next_view, remote: true %>
  </div>

2. 更新したいviewを部分テンプレート化

app/views/public/homes/_calendar.html.erb

<%= month_calendar events: post_records do |date, post_records| %>
  <%= date.day %>
  <% post_records.each do |post_record| %>
  <div class="calendar-text">
    <%= link_to post_record.training_name, post_record_path(post_record) %>
  </div>
  <% end %>
<% end %>

また呼び出しているviewにはこのようにidを持たせてあげます。

app/views/public/homes/calendar.html.erb

<div id="calendar">
  <%= render 'calendar', post_records: @post_records %>
</div>

3.アクション名.js.erbファイルを作り、更新処理を書く

app/views/public/homes/calendar.js

$('#calendar').html("<%= j(render 'calendar', post_records: @post_records) %>");

参考にさせていただいた記事

まとめ

gemのおかけできれいなカレンダーを表示することができました。
また、見た目を変更する際にbootstrapを実装していたで、scssのファイルに設定が必要で少し時間がとられてしまいました。初歩的なcss.scssの関係性を把握できていなかったので、そこも１つ学びがあってよかったと思います。

今まで、気が向いたときにメモとインプットになればいいなという気持ちでやってきましたが、今日から毎日投稿しようと思います。
きっかけとしては、DWCに通い始めてから自己啓発本やビジネス本を読むようになり自分は言語化することに対して目をそらしていると気づいたからです。
とにかく考えを文字に起こすことで、知性を感じれる会話や思考を癖づけてたいなと思います。
頑張るぞ～～～