【Rails】simple_calendarを使ってカレンダーつきのmemo機能を作る。

はじめに

筋トレメモアプリを作成するにあたり、カレンダーの機能が必要であったので今回はsimple_calenderを採用して実装しました。以下実装手順です。

indexにカレンダーが実装されていて、ブログを作成することができます。
ブログ作成時に日時を指定することによって、カレンダーとリンクします。

実装の流れ

まずはgemをインストールします。
gemfileに以下のコードを書いてください。

gem 'simple_calendar', '~> 2.0' 

bundle install を忘れずに打ってください

class CreateMemos < ActiveRecord::Migration[5.2]
 def change
   create_table :memos do |t|
	    t.integer :customer_id ,null: false
	    t.string :menu
	    t.integer :set
	    t.integer :weight
	    t.integer :rep
	    t.datetime :start_time
     t.timestamps
   end
 end
end

↑マイグレーションファイルはこの様にしました。

↓コントローラーです

class Public::MemosController < ApplicationController
	before_action :ensure_correct_customer, only: [:edit, :update, :destroy]

　def index
 	@memo = Memo.new
 	@customer = current_customer
   @memos = Memo.where(customer_id: current_customer).order(start_time: "desc").page(params[:page]).per(8)
 end
 
 def edit
 
 end
 
 def create
 	memo = Memo.new(memos_params)
   if  memo.customer_id = current_customer.id
   	memo.save
       flash[:notice] = "トレーニングを記録しました"
 	    redirect_to memos_path
   else
     render :index
   end
 end
 
 def update
   if @memo.update(memos_params)
      flash[:notice] = "トレーニングを更新しました"
      redirect_to memos_path
   else
     render :edit
   end
 end
 
 def destroy
	   @memo.destroy
	   flash[:notice] = "トレーニングを削除しました"
	   redirect_to memos_path
 end
 
 def ensure_correct_customer
 @memo = Memo.find(params[:id])
   unless @memo.customer == current_customer
     redirect_to memos_path
   end
 end
 
 private
   def memos_params
     params.require(:memo).permit(:customer_id,:set,:menu,:start_time,:rep,:weight)
   end
end

ここからはindexの記述です

<div class="container-fluid">
	<h2 class="section-top"><span class="fas fa-dumbbell" aria-hidden="true"></span> MYトレーニングメモ</h2>
	<div class="col-md-3 col-sm-12 col-xs-12">
   <%= form_for (@memo) do |f| %>
     <div class="field row">
       <label for="menu">トレーニング名</label>
       <p><%= f.text_area :menu%></p>
       <label for="weight">重量(kg)</label>
       <p><%= f.select :weight, [*(0..200)]%></p>
       <label for="rep">回数</label>
       <p><%= f.select :rep, [*(1..100)]%></p>
       <label for="set">セット数</label>
       <p><%= f.select :set, [*(1..30)]%></p>
       <label for="start_time">トレーニング日</label>
       <p><%= f.datetime_select :start_time%></p>
     </div>
     <div class="actions row">
       <%= f.submit class: "btn btn-sm btn-hachiss" %>
     </div>
   <% end %>
 	</div>
 	<div class="col-md-9 col-sm-12 col-xs-12">
		<%= month_calendar events: @customer.memos do |date, memos| %>
		  <%= date.day %>
		  <% memos.each do |memo| %>
		    <div>
		      <%= link_to memo.menu, edit_memo_path(memo) %>
		    </div>
		  <% end %>
		<% end %>
		<table class="memo table table-bordered">
			<thead>
				<tr>
					<th>トレーニング名</th>
					<th>重量</th>
					<th>回数</th>
					<th>セット数</th>
					<th>トレーニング日</th>
					<th></th>
					<th></th>
				</tr>
		  </thead>
			<% @memos.each do |customer| %>
				<tbody>
					<tr>
						<td><%= customer.menu%></td>
						<td><%= customer.weight%>kg</td>
						<td><%= customer.rep%>rep</td>
						<td><%= customer.set%>set</td>
						<td><%= customer.start_time.strftime("%Y-%m-%d %H:%M")%></td>
						<td><%=link_to "編集" , edit_memo_path(customer),:class=>"btn04"  %></td>
						<td><%=link_to "削除",memo_path(customer) , method: :delete , data: {confirm:"削除しますか"} ,:class=>"btn03"%></td>
					</tr>
				</tbody>
			<% end %>
  		</table>
  		<%= paginate @memos %>
 	</div>
</div>

カレンダーの見た目を整えるために以下を実施。

 $ rails g simple_calendar:views

以下の４つがクリエイトされて見た目が整います。
あとでカスタマイズが出来る様になります。

     create  app/views/simple_calendar
     create  app/views/simple_calendar/_calendar.html.erb
     create  app/views/simple_calendar/_month_calendar.html.erb
     create  app/views/simple_calendar/_week_calendar.html.erb

application.scssに記述を追加します

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

追記

Githubの様に筋トレした日は緑にカレンダーが変わる様に変更

SCSSに以下を記載

.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の所ですが、カスタマイズが必要であれば他のクラスにも入力すれば可能です。

完成です。

リレーションとかルーティングは省いています。

参考にしたサイト

https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0