Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@mtomoko15

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

はじめに

お店のサイトで、イベントをカレンダーを用いて一覧表示にしました。
当初は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
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
mtomoko15
2020年10月〜プログラミングスクールに通い、プログラミング学習を初めました。 HTML/CSSから始まり、スクールではRuby On Railsをメインに学習しました。 数ヶ月後の自分の為に、コードや知識を書き溜めていきます。 よろしくお願いします。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?