シンプルカレンダーでカレンダーを入れました。(Gem)

5116 ワード
初心者 Qiita Qiita テキストリンク

簡単なカレンダー作りたい

今回、オリジナルアプリで下記のようなカレンダーを作成しました。

これはsimple_calendarというGemを利用しています。

どんな風に作ったか思い出しを含め投稿します。
間違い等あるかもしれませんが宜しくです。

バージョン

  • Ruby 2.6.5
  • Rails 6.0.0
  • Bootstrap導入済み

流れ

①

#Gemfileに記載
gem 'simple_calendar', '~> 2.0'

記載後bundle installをする。

②
rails g にてコントローラーの作成。
※ルーティングを忘れずに。

③
rails g にてモデルの作成。

④
今回は投稿した日時を表示させたいので、マイグレーションファイルに記載。
t.datetime :daytime,null: false
が重要です。

class CreateMuscles < ActiveRecord::Migration[6.0]
  def change
    create_table :muscles do |t|
      t.string :title,          null: false
      t.text :explain,          null: false
      t.integer :part_id,       null: false
      t.integer :difficult_id,  null: false
      t.datetime :daytime,      null: false
      t.references :user,       foreign_key: true
      t.timestamps
    end
  end
end

その後rails db:migrateを実行！

⑤コントローラーの中身を編集する。（私のものはわかりずらいので割愛）
⑥ビューの編集。

<h1 class="training-title">MYカレンダー</h1>
<div class="calendar">
  <%= week_calendar events: @muscles do |date, muscles| %>
    <%= date.day %>
    <% muscles.each do |muscle| %>
      <div>
        <%= link_to muscle.title, muscle %>
      </div>
    <% end %>
  <% end %>
</div>

今回は一週間分を表示させたかったので

<%= week_calendar events: @muscles do |date, muscles| %>

の部分がweek_calendarになってます。
ちなみにmonth_calenderなら一月分です。

見た目の編集のため、以下を実行

$ rails g simple_calendar:views

最後application.cssに下記を記入。

 *= require simple_calendar ＃ここに追加
 *= require_tree .
 *= require_self
 */

ほぼ参考の方と同じですが、復習を兼ねて書かせていただきました。

参考

導入までは、こちらの方を参考にしました！
https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0