Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】'simple_calendar'を用いて予定表を作成

Last updated at Posted at 2020-12-23

#はじめに
お店のサイトで、イベントをカレンダーを用いて一覧表示にしました。
当初はfullcalendarを使用する予定でしたが、スクールで成果物の提出期限もあり学習コストがあまりかからない方法を考えた末simlpe_calendarを使用することに至りました。
数ヶ月後の自分の為にも、勇気を出してQiitaの初投稿とさせていただきます。
#完成イメージ
スクリーンショット 2020-12-23 9.37.10.png

#前提
・予定投稿機能実装済(記事内ではScheduleモデル)
・言語はi18nによって日本語化済。本来であれば、曜日、月は英語表記になっていると思います。(エラーメッセージを日本語化したかっただけなのですが、意図せずこちらも変わっていました)

#simple_calendarインストール

Gemfile
gem "simple_calendar", "~> 2.0"
$ bundle install

#カレンダーのview作成
前提に書かせていただいているScheduleモデルのマイグレーションファイルはこちらです。
t.string :content は予定のタイトル、詳細画面で予定の詳細を表示したかったので t.text :plan で予定の詳しい文章を入れています。
開始日時のデータも欲しいので t.datetime :start_time が必要です。

db/migrate/..._create_schedules.rb
class CreateSchedules < ActiveRecord::Migration[5.2]
  def change
    create_table :schedules do |t|
      t.string :content
      t.text :plan
      t.datetime :start_time

      t.timestamps
    end
  end
end

カレンダーの見た目を整える為、下記を実行しviewファイルを作成します。

$ rails g simple_calendar:views
app/views/schedules/index.html.erb
<h1>Schedule</h1>
<%= month_calendar events: @schedules do |date, schedules| %>
 <%= date.day %>
  <% schedules.each do |schedule| %><br />
   <%= schedule.start_time.strftime('%H:%M') %> #スケジュールの開始時間を表示
   <%= link_to schedule.content,schedule_path(schedule) %>
  <% end %>
<% end %>

スケジュールのタイトルからスケジュール詳細にリンクする仕様です。

simple_calendarのCSSを適用させるために、application.scssに追記します。

app/assets/stylesheets/application.scss
 *
 *= require simple_calendar #←ここに追記します
 *= require_tree .
 *= require_self
 */

月、曜日を日本語化にしているので不自然だった為少し修正を加えました。

app/views/simple_calender/_month_calendar.html.erb
 <div class="simple-calendar">
  <div class="calendar-heading">
    <%= link_to t('simple_calendar.previous', default: '<<先月'),  calendar.url_for_previous_view %> #Previousを先月に変更
    <font size="5"><span class="calendar-title"><%= start_date.year %> <%= t('date.month_names')[start_date.month] %></span></font>
    <%= link_to t('simple_calendar.next', default: '次月>>'), calendar.url_for_next_view %> #Nextを次月に変更
  </div>

  <table class="table table-striped">
    <thead>
      <tr>
        <% date_range.slice(0, 7).each do |day| %>
          <th><%= t('date.abbr_day_names')[day.wday] %></th>
        <% end %>
      </tr>
    </thead>
・
・
・

以上でsimple_calendarの導入が完了しました!

#参考
https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0
https://github.com/excid3/simple_calendar

参考にさせていただきました。ありがとうございます。

#最後に
ここまでご覧くださった方、ありがとうございます。
初の投稿となりましたが、おかしな表現などあれば失礼致しました!
ではまた投稿させて頂きます!

1
2
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

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?