【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
以下の4つがクリエイトされて見た目が整います。
あとでカスタマイズが出来る様になります。
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の所ですが、カスタマイズが必要であれば他のクラスにも入力すれば可能です。
完成です。
リレーションとかルーティングは省いています。
参考にしたサイト
この記事が気に入ったらサポートをしてみませんか?