【HowTo】Simple Calendar/カレンダーをお手軽に導入してみる（投稿機能付き）

現在、個人アプリを作成しており、その中の機能として「トレーニングメモ機能」を実装することにしました。
スクールではカリキュラムになかった内容であったため、自身で色々と調べて実装したので、備忘録として記事にします。
皆様の実装に少しでも役立てていただければ、幸いです。

本記事該当Github:　https://github.com/Tatsu88-Tokyo/BulkFriends2

#実装に向けての考え
今回、「トレーニングメモ機能」を実装するにあたり、以下のことを考えました。
-　筋トレをする上で記録をつけることは、モチベーション維持に繋がる。
-　記録をつけるのであれば、日付別に記録をする必要がある。
-　その記録を閲覧するときはできるだけ見やすい方がベター。

以上の考えから、今回の「トレーニングメモ機能はカレンダーを使用して、日付ごとに記録をつけられるようにすることを目標としました。
そこで、色々と調べた結果、今回はgemの「simple_calendar」を使用した実装をすることとしました。
以下にて、実装方法などを記載していきます。

#実装イメージ
まず、今回実装するイメージを以下にて説明します。
今回、実装する機能は以下のようになってます。
1.カレンダーの表示
2.カレンダーへの投稿・削除・編集

##1.カレンダー全体感+投稿内容詳細+投稿アクション
![demo](https://gyazo.com/0e6ab54b46d469a4dc1106f7238ea2f3/raw)

##2.カレンダーへの投稿
![demo](https://gyazo.com/02192fcae356db1ddf07345bade9f0c7/raw)

#事前準備
##gem導入
まず、今回の実装に当たって必須となるgemを導入します。

```:gemfile
gem 'simple_calendar', '~> 2.0'
#記載完了次第、Bundle installを忘れずに。
```

##コントローラ/モデル準備
続いて、今回使用するコントローラを作成します。

```:ターミナル
$ rails g controller trainings
```

モデルも作成します。

```:ターミナル
rails g model training
```
その後、マイグレーションファイルにて、今回の仕様に合わせてテーブルを作成します。

```:migrationfile
class CreateTrainings < ActiveRecord::Migration[5.2]
  def change
    create_table :trainings do |t|
      t.string :title
      t.text :content
      t.date :start_time
      t.references :user, foreign_key: true

      t.timestamps
    end
  end
end
```

```:ターミナル
$ rails db:migrate
```
コントローラとモデルの作成が完了しました。
以上で必要なファイルなどの準備ができましたので、コントローラなどを編集していきましょう。

#モデル編集
まず、作成したモデルに今回の仕様に合わせて記述します。
こちらは先ほどのMigration fileに合わせて記載していきます。

```:training.rb
class Training < ApplicationRecord
  belongs_to :user

  validates :title, presence: true
  validates :start_time, presence: true
end
```
ユーザーモデルも関連しているので、忘れずに。

```:user.rb(一部抜粋)
class User < ApplicationRecord
 has_many : trainings
end
```

#コントローラ編集
続いて、コントローラを編集します。

```:training_controller
class TrainingsController < ApplicationController
  before_action :set_user
  def index
    @trainings = current_user.trainings
  end

  def show
    @training = current_user.trainings.find(params[:id])
  end

  def new
    @trainings = current_user.trainings
  end

  def edit
    @training = current_user.trainings.find(params[:id])
  end

  def update
    @training = current_user.trainings.find(params[:id])
    @training.update(update_params)
    redirect_to trainings_path(@user.id)
  end

  def create
    @training = current_user.trainings.new(training_memo)
    if @training.save
      redirect_to trainings_path(@user.id)
    else
      redirect_to new_training_path
    end
  end

  def destroy
    @trainings = current_user.trainings.find(params[:id])
    @trainings.destroy
    redirect_to trainings_path(@user.id)
  end


  private
  def training_memo
    params.permit(:start_time,:title, :content,:user_id)
  end

  def set_user
    @user = User.find(params[:id])
  end

  def update_params
    params.require(:training).permit(:start_time,:title, :content,:user_id)
  end
end
```

#View編集(indexのみ）
それではViewの編集をしていきます。
全てのViewを記事内に記載するとボリュームが多くなってしまうため、割愛します。
*editやdestroy向けのファイルに関して気になる方は、この記事の冒頭にある当方のGithubからご参照いただけますと幸いです。
今回のカレンダーを作成するにあたり、簡単かつ見栄えをよくするために"simple calendar"にて準備されているviewファイルをダウンロードします。

```:ターミナル
$ rails g simple_calendar:views
#=>以下のファイルが生成されます。
   app/views/simple_calendar
   app/views/simple_calendar/_calendar.html.erb
   app/views/simple_calendar/_month_calendar.html.erb
   app/views/simple_calendar/_week_calendar.html.erb
```

上記で作成したファイルを使用するために、cssファイルに以下のように記載いたします。

```:css
*= require simple_calendar
```

今回はマンスリーカレンダーを使用したかったので、Readmeに従って以下をベースに記載をします。
(ウィークリーカレンダーなど使用したい方はReadme参照ください)

```:Readme(SimpleCalendar)
<%= month_calendar events: @meetings do |date, meetings| %>
  <%= date %>
  <% meetings.each do |meeting| %>
    <div>
      <%= meeting.name %>
    </div>
  <% end %>
<% end %>
```
自身のファイルにあてはめます。

```haml:view
=render "home/header_login"
.trainings
  =link_to "記録する", new_training_path ,class:"training-edit"
  = month_calendar events: @trainings do |date,trainings|
    = date.day
    - trainings.each do |training|
      =link_to training.title,training_path(training.id)
```

以上でviewの編集は完了です。

#routing編集
最後にルーティングを編集します。
今回はユーザーとリンクさせるためにユーザーの記述にネスティングすることで実装しました。

```:route.rb(一部抜粋)
resources :user, only: [:show, :edit, :update]do
  resources :trainings
```

以上で、カレンダーを使用した”トレーニングメモ”機能が実装できました！
gemを使用することで簡単にカレンダー機能を実装できますね。


#参照
Github Simple calendar
https://github.com/excid3/simple_calendar


【rails】simple_calendarを使ってカレンダーつきのブログ機能を作ってみた。
https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0

simple calendarを使ってカレンダーを導入する
https://ywatanab.hatenablog.com/entry/2018/10/26/144038

以上となります。最後までご覧いただき、ありがとうございました！
今後も学習した事項に関してQiitaに投稿していきますので、よろしくお願いします！
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。