[Rails] Simple Calendarでカレンダーを表示させよう!

Ruby on Railsを勉強している人

Simple Calendarでカレンダーを表示させたいな!

上記のようなお悩みを持っている方はいないでしょうか?

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • Simple Calendarをインストールする
  • Simple CalendarのViewを生成する
  • カレンダーに予定を追加できるようにする
  • カレンダーを表示できるようにする
  • Ruby on Railsを学ぶことができるオススメの教材

Webアプリケーション作成時、カレンダー機能を付け加えたいと思ったことはないでしょうか?

カレンダー機能を一から付け加えようとすると結構大変な作業となります。

そこで「Simple Calendar」というGemを利用することで簡単にカレンダー機能を付け加えることができます。

「Simple Calendar」は月間カレンダー、週間カレンダーなど日付指定をしてカレンダーを作成することができるとても便利なGemとなっています。

それでは「Simple Calendar」を使用してみましょう。

1.Simple Calendarをインストールする

ここでは「Simple Calendar」というWebアプリケーション作成を終えているという前提でお話を進めていきます。

Webアプリケーション作成方法を知りたい方は是非「Ruby on Rails 6 超入門」をご覧ください!

Ruby on Rails 6 超入門」は入門者向け書籍でRailsの経験がなくてもわかりやすい本となっています!

 

まず始めにGemfileに「gem ‘simple_calendar’, ‘~> 2.0’」を追加し、「Simple Calendar」のディレクトリで「bundle install」または「bundle update」を実行しましょう。




2.Simple CalendarのViewを生成する

Gemをインストールしただけではカレンダーを表示させることができないので、「Simple Calendar」のviewを生成させましょう。

「Simple Calendar」のview生成はコマンドプロンプトで以下のように行います。

上記のように実行することで以下のフォルダ、ファイルが生成されます。

今回は月間カレンダーを作成したいので、「_month_calendar.html.erb」のファイルを使用していきます。

最後に「Simple Calendar」のCSSを適用させたいので、「application.css」のファイルに「*= require simple_calendar」を付け加えます。




3.カレンダーに予定を追加できるようにする

このままではただのカレンダーになってしまうので、カレンダーに予定を追加できるようにします。

ここではscaffoldを使用してMeetingというモデルを作成します。

コマンドプロンプトで以下のように入力してください。

上記のように実行することで以下のフォルダ、ファイルが生成されます。

フォルダ、ファイルの作成を終えたら、コマンドプロンプトで以下のように入力してください。

これでデータベースを変更させることができました。




4.カレンダーを表示できるようにする

下準備ができたので、次に月間カレンダーを表示できるようにしましょう。

meetingsフォルダ内の「index.html.erb」のファイルを開きましょう。

scaffoldを使用したので、すでに「index.html.erb」のファイル内にコードが記述されていますが、書き換えていきましょう。

「index.html.erb」のファイル内を以下のように書き換えて下さい。

注意

bootstrapを使用して簡易的にカスタマイズしています。

次に、「_month_calendar.html.erb」のファイルをカスタマイズしましょう。

注意

タイトルの文字を大きくし、中央揃えにしました。

サーバーを起動させると以下のようにカレンダーが表示されます。

無事に「Simple Calendar」が表示されました。




5.Ruby on Railsを学ぶことができるオススメの教材

Ruby on Railsを学習している皆様にオススメの教材をご紹介させていただきます。

現場で使える Ruby on Rails 5速習実践ガイド

現場で使える Ruby on Rails 5速習実践ガイド」はRuby on Railsの学習を一通り終えてある程度知識を身につけた方にオススメしたい本です。

現場で使える Ruby on Rails 5速習実践ガイド」は現場で実際にどのように使われているのかという視点も交えて解説されています。

そのため、初心者の方が次のステップに進むために最適な本となっていますので、オススメです。

これらの本で是非学習を進めてみてはいかがでしょうか?

レベル別におすすめの本も紹介していますので、どのような本がオススメか知りたい方はこちらもご覧になって下さい。

Udemy

Udemy(ユーデミー)」ではRuby on Railsを学ぶことができる講座を多数取り扱っています。

Udemy(ユーデミー)」では頻繁にセールが行われており、時には半額以下(最大90%OFF)になることも。

以下の記事でRuby on Railsを学ぶことができるオススメの講座をまとめていますので、よかったらご覧になって下さい。

プログラミングスクール

Ruby on Railsを学ぶことができるプログラミングスクール
  • TechAcademy:通過率10%の選考に合格した現役エンジニアから学べるオンラインに特化したプログラミングスクール。
  • DMM WebCamp:講師に質問し放題で効率的に学習。短期間のカリキュラムで確実に結果が出る。専属コーチ・アドバイザーが卒業まで伴走。
  • CodeCamp:あなたの目的に合わせた、最適な学習カリキュラム。
  • Tech Camp:未経験でも挫折せずテクノロジースキルが身につく。

それぞれ無料体験も行っているので、どのようなものか試してみるのもいいでしょう。

無料体験を受けているうちに自分に合うサービスかどうか確認することができます。

以下の記事で各プログラミングスクールをまとめているのでこちらもよかったらご覧になってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です