【Rails】投稿をカレンダーフォーマットで表示する方法

1.バージョン

Rails 5.1.6
ruby 2.3.1p112

2.完成イメージ

indexにカレンダーが実装されていて、複数箇所に投稿が現れるように。
投稿作成時に日時を指定し、カレンダーとの接続を可能にする。

tweets等の言葉はワシが設定した変数やコントローラ名なので適宜自分用に言い換えてくだされ。

3.実装の流れ

gemのインストール！！している人は大丈夫！！

/Gemfile

gem 'simple_calendar', '~> 2.0'

既存の投稿機能が付されているテーブルを変更しよう！！
カレンダーに出力する際には【t.datetime :start_time】という命名で進めましょう。

example/before

class CreateBlogs < ActiveRecord::Migration[5.1]
  def change
    create_table :tweets do |t|
      t.string :name
      t.text :body
      t.datetime :day_time

      t.timestamps
    end
  end
end

こんな感じでカラムは入っていませんか？？
下記のように直していきましょう！！

example/after

class CreateBlogs < ActiveRecord::Migration[5.1]
  def change
    create_table :tweets do |t|
変更前
      t.string :title
      t.text :content
      t.datetime :start_time

      t.timestamps
    end
  end
end

記述した後に rails db:migrate を忘れず！！！

コントローラーは特に変更ないよ！ストロングパラメータだけお気をつけて。

/app/controllers/tweets_controller.rb

class BlogsController < ApplicationController

  def tweet_parameter
    params.require(:tweet).permit(:title, :content, :start_time)
  end

end

ここからはViewの記述！！

/app/views/tweets/index.html.erb

<h1>投稿一覧</h1>

<p id="notice"><%= notice %></p>
<h1>自分の日記</h1>

<table>
  <thead>
    <tr>
      <th>タイトル</th>
      <th>時間</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @tweets.each do |t| %>
      <tr>
        <td><%= t.start_time %></td>
        <td><%= t.title %></td>

        <td><%= link_to "詳細へ", tweet_path(t.id) %></td>
        <td><%= link_to "編集する", edit_tweet_path(t.id) %></td>
        <td><%= link_to 'Destroy',tweet_path(t.id), method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to '日記をかく', new_tweet_path %>

<%= month_calendar events: @tweets do |date, tweets| %>
  <%= date.day %>

  <% tweets.each do |t| %>
    <div>
      <%= link_to t.title, tweet_path(t.id) %>
    </div>
  <% end %>
<% end %>

【.strftime("%Y-%m-%d %H:%M")】は日本時間に変更する必殺技です。
<%= date %>だと2018-10-01と出力されます。しかし私達はカレンダーらしく日にちだけ表示したいので、<%= date.day %>で出力します。

/app/views/blogs/new.html.erb

<%= form_for(@tweet, :url => { controller:'tweets', action:'create'})do |f| %>

  <div class="field">
    <%= f.label :title %>
    <%= f.text_field :title, :size => 50 %>
  </div>

  <div class="field">
    <%= f.label :start_time %>
    <%= f.datetime_field :start_time, :size => 30 %>
  </div> 

  <div class="field">
    <%= f.label :content %>
    <%= f.text_area :content, :size => "100x20" %>
  </div>

  <%= f.submit "投稿する" %>
   <% end %>
  <%= link_to "一覧に戻る", tweets_path %>

edit.html.erbもshow.html.erbも同様に！

お次はカレンダーの見た目を整えよう！！

 $ 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に記述を追加しよう！！

/app/assets/stylesheets/application.css

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

とりあえずなんとか完成や、、、

5.まとめ

既存の投稿システムを作った後にカレンダーを作りたくなった際や、そのような依頼を受けた際に応用して考えていただけたらと思います！！

以下が公式ドキュメントです。
https://github.com/excid3/simple_calendar