はじめに

Twitterライクのアプリを作っており、タスクや予定の管理などにカレンダーを導入したいと思った方に向けての執筆です！

公式と異なり、scaffoldなしで実装しております！
ご自身の作成中のアプリに必要箇所を取り入れてもらえればと思います！

完成形

日時を指定して投稿すると、カレンダー内のその日時に投稿が表示されます！

実装方法

まずはgemをインストールします。
gemfileに以下のコードを記入します！

Gemfile

gem 'simple_calendar', '~> 2.0'

ターミナル

 $ bundle install

今回はカレンダーに出力したいため :start_timeカラムを新たに作成します！

ターミナル

 $ rails g migration AddStart_TimeToTweets start_time:datetime

ターミナル

$ rails db:migrate

,:start_timeをコントローラーの最終行付近に記入しましょう！(下記コードを参考に！)

/app/controllers/tweets_controller.rb

class TweetsController < ApplicationController

  private

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

end

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

<h1>カレンダーアプリ</h1>

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

  <tbody>
    <% @tweets.each do |t| %>
      <tr>
        <td><%= t.title %></td>
        <td><%= t.start_time.strftime("%Y-%m-%d %H:%M") %></td>
        <td><%= link_to '詳細', t %></td>
        <td><%= link_to '編集', edit_tweet_path(t.id) %></td>
        <td><%= link_to '削除',blog_path(t.id), method: :delete, data: { confirm: '本当に削除しますか?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'カレンダーを書く', new_tweet_path %>

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

  <% tweets.each do |tweet| %>
    <div>
      <%= link_to tweet.title, tweet %>
    </div>
  <% end %>
<% end %>

.strftime("%Y-%m-%d %H:%M")を記述することによって日本時間に変更することができます。

/app/views/tweets/new.html.erb

<%= form_with(model: @tweet, local: true) do |f| %>

  <div class="title">
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

    <div class="time">
    <%= f.label :start_time %>
    <%= f.datetime_select :start_time %>
  </div>
  
  <div class="content">
    <%= f.label :body %>
    <%= f.text_field :body %>
  </div>


  <div class="submit">
    <%= f.submit %>
  </div>

<% end %>

カレンダーの見た目を整えるために以下のコードを実行してください

ターミナル

 $ 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
 */

　
以上で完成です！！

参考

公式ドキュメント
https://github.com/excid3/simple_calendar

最後に

不備等ございましたらコメントにて教えていただけると幸いです！
ここまで読んでいただきありがとうございました！