2
0

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.

簡単なカレンダー機能の導入方法(1)

Last updated at Posted at 2021-02-11

#Gemのsimple_calendarを使ったカレンダー機能の実装について
###公式のGitHub

###完成形

###目次

##Gemの導入方法について
1.まずGemFileの最終行に『gem "simple_calendar", "~> 2.0"』と追記します。

Gemfile
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem "simple_calendar", "~> 2.0"

2.上記のように記載ができたらターミナルで『bundle install』をします。

ターミナル
$ bundle install

##CSSに追記します
1.まず『アプリ名ディレクトリ/app/assets/stylesheets/application.css』を開きます。

追記前
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/

2.application.cssに『*= require simple_calendar』を追記します。

追記後
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require simple_calendar
*= require_tree .
*= require_self
*/

##カレンダーを表示させるためにビューファイルへ記述をします。

1.表示させたいビューファイルに下記のように記述します。

<%= month_calendar do |date| %>
  <%= date %>
<% end %>

2.記載できたらターミナルで『rails s』を行います

ターミナル
$ rails s

3.ブラウザで確認すると以下のように表示されるはずです

##まとめ
今回はGemのインストール、CSSの追記、ビューファイルの記載方法をまとめてみました
カレンダーの実装、マークダウンどちらも初めてで練度が低いためわかりやすく解説ができているか不安ですが、少しずつカレンダー機能もマークダウンも使いこなしていけたらなと思います。
タイトルの通り今回は『簡単なカレンダー機能の導入方法(1)』ということで、まだこれではカレンダーを表示させただけでまだ予定などを入力ができないので、次回はスケジュール投稿機能について詳しく書いていこうと思います。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?