gemのsimple_calendarをPFで使おうかなと考えているので、PFで実装する前に練習で使用してみることにしました。

https://github.com/excid3/simple_calendar

まず最初にGemfileにsimple_calenderのgemを追加してbundle installしました。

gem "simple_calendar", "~> 2.4"

次にboardのコントローラを作成します。

Sayo-MacBook-Pro:sample SAYO$ bundle exec rails generate controller boards index
Running via Spring preloader in process 13728
      create  app/controllers/boards_controller.rb
       route  get 'boards/index'
      invoke  erb
      create    app/views/boards
      create    app/views/boards/index.html.erb
      invoke  helper
      create    app/helpers/boards_helper.rb
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/boards.scss

class BoardsController < ApplicationController
  def index
    @boards = Board.all
  end
end

boardモデルを作成します。

Sayo-MacBook-Pro:sample SAYO$ bundle exec rails generate model board
Running via Spring preloader in process 13762
      invoke  active_record
      create    db/migrate/20210524125207_create_boards.rb
      create    app/models/board.rb

作成されたマイグレーションファイルに必要なカラムとデータ型を指定します。

class CreateBoards < ActiveRecord::Migration[6.1]
  def change
    create_table :boards do |t|
      t.string :title
      t.text :content
      t.datetime :start_time

      t.timestamps
    end
  end
end

t.datetime :start_timeこのカラムがカレンダーには必要です。日記を投稿したい日を選択するために使われます。

追記したらbundle exec rails db:migrateを行います。

Sayo-MacBook-Pro:sample SAYO$ bundle exec rails db:migrate
== 20210524125207 CreateBoards: migrating =====================================
-- create_table(:boards)
   -> 0.1614s
== 20210524125207 CreateBoards: migrated (0.1615s) ============================

カレンダーが表示されるようにビューを作成していきます。

<p id="notice"><%= notice %></p>

<h1>自分の日記</h1>

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