LoginSignup
2
1

More than 3 years have passed since last update.

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

Posted at

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

今回、オリジナルアプリで下記のようなカレンダーを作成しました。
image.png
これは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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1