Rails6 シンプルなカレンダーにDBに格納されている予定を記載する

目的

• Rails6 シンプルなカレンダーを実装するにて成功したカレンダーにDBに格納されている予定を記載する方法をまとめる。

環境

• Rails version
  • 6.0.2.1
• SQLite3
  • 1.4
• OS
  • macOS 10.13.6

目標

• http://localhost:3000/home/topにアクセスした時にカレンダーが表示される。
• 表示されたカレンダーにDBのデータが予定として記載されるようにする。

公式の手順

• simple_calendar_tutorial.md

条件

• 下記の記事を参考に作業を行い、http://localhost:3000/home/topにアクセスした際にカレンダーが表示されるようになっていること。
  • Rails6 シンプルなカレンダーを実装する

実施方法

1. モデルの作成とテーブル作成

   1. 下記コマンドを実行してモデルを作成する。(string型のnameカラムとdatetime型のstart_timeカラムを保有したMeetingテーブル)

      $ cd アプリ名フォルダ
      $ rails g scaffold Meeting name:string start_time:datetime
      

   2. 下記コマンドを実行してテーブルを作成する。

      $ rails db:migrate
      

2. 予定の格納

   1. 下記コマンドを実行してテスト用の予定を格納する。

      $ rails c
      irb(main):001:0> meeting = Meeting.new(name: "test", start_time: "2020-02-18 08:50:42")
      irb(main):002:0> meeting.save
      => true
      

3. ビューの設定

   1. 下記のファイルを開く
      • アプリ名ディレクトリ/app/views/home
        • top.html.erb

   2. 下記の内容をtop.html.erbに記載する。(すでに記載されている内容は削除してから記載する。)

      <%= month_calendar events: @meetings do |date, meetings| %>
        <%= date.day %>
      
        <% meetings.each do |meeting| %>
          <div>
            <%= meeting.name %>
          </div>
        <% end %>
      <% end %>
      

4. 表示の確認

   1. 下記コマンドを実行してアプリケーションをスタートする。

      $ cd アプリ名フォルダ
      $ rails s
      

   2. ブラウザでhttp://localhost:3000/home/topにアクセスし下記の画面が表示されるか確認する。2020年2月18日のカレンダーのセルに「test」と記載されていることを確認する。