LoginSignup
11
16

More than 1 year has passed since last update.

Simple Calendar gemの導入・基本的な使い方

Last updated at Posted at 2021-01-01

RailsのgemであるSimple Calendarを使ったアプリ開発を行っているので、後学のために、Simple Calendarの導入と基本的な使い方を説明します。

内容的にはsimple_calendarの公式GitHubの日本語訳になります。

※2022年から技術系の記事は個人ブログに投稿しております。ぜひこちらもご覧ください→yamaday0u Blog

Simple Calendarとは

カレンダー表示機能を簡単に実装できるようにしてくれるgemです。

実行環境

  • Ruby 2.6.5
  • Rails 6.0.3.4

Simple Calenderのインストール

Gemfileに以下のように記述し、ターミナルでbundle installを入力します。

Gemfile
gem "simple_calendar", "~> 2.0"
ターミナル
bundle install

application.cssファイルにデフォルトのスタイルシートを読み込みます。

app/assets/stylesheets/application.css
*= require simple_calendar

もしくはapplication.scssファイルに下記の記述をします。

app/assets/stylesheets/application.scss
@import "simple_calendar";

メソッドを使ってビューファイルにカレンダーを生成

Simple Calendarのメソッドを使ってビューファイルにカレンダーを生成する方法を説明します。

month_calendarメソッド

month_calendarメソッドを使えば月間カレンダーを生成できます。

month.html.erb
<%= month_calendar do |date| %>
  <%= date %>
<% end %>

スクリーンショット 2021-01-01 21.52.59.png

week_calendarメソッド

week_calendarメソッドを使えば週間カレンダーが生成できます。
オプションのnumber_of_weeksで何週分表示するかを設定できます。number_of_weeksを記述しない場合は、デフォルトで1週分表示します。

week.html.erb
<%= week_calendar(number_of_weeks: 2) do |date| %>
  <%= date %>
<% end %>

スクリーンショット 2021-01-01 21.55.36.png

calendarメソッド(表示日数をカスタムする)

calendarメソッドを使えばカレンダーの表示日数をカスタムすることができます。
オプションのnumber_of_daysで何日分表示するかを設定できます。number_of_daysを記述しない場合は、デフォルトで4日分表示します。

custom.html.erb
<%= calendar(number_of_days: 4) do |date| %>
  <%= date %>
<% end %>

スクリーンショット 2021-01-01 22.01.07.png

Simple Calendarの導入から基本的な使い方まではここまでとなります。

Simple Calendarの見た目を自分で編集する

各カレンダーの見た目を編集したい場合は下記のコマンドを入力して、ビューファイルを自身のアプリにコピーします。

ターミナル
rails g simple_calendar:views

#以下の通りsimple_calendarフォルダと各ビューファイルが自身のアプリに生成されます
create  app/views/simple_calendar
create  app/views/simple_calendar/_calendar.html.erb
create  app/views/simple_calendar/_month_calendar.html.erb
create  app/views/simple_calendar/_week_calendar.html.erb

参考資料

11
16
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
11
16