押さえておきたいWeb知識 
Simple Calendarでのカレンダー表示方法を知りたい人
Simple Calendarでカレンダーを表示させたいな!
Simple Calendarでのカレンダー表示方法を解説するね!
Simple Calendarでのカレンダー表示方法を知っている人
上記のようなお悩みを持っている方はいないでしょうか?
この記事は上記のような疑問を解消するものとなっています。
- Simple Calendarをインストールする
- Simple CalendarのViewを生成する
- カレンダーに予定を追加できるようにする
- カレンダーを表示できるようにする
- Ruby on Railsを学ぶことができるオススメの教材
Webアプリケーション作成時、カレンダー機能を付け加えたいと思ったことはないでしょうか?
カレンダー機能を一から付け加えようとすると結構大変な作業となります。
そこで「Simple Calendar」というGemを利用することで簡単にカレンダー機能を付け加えることができます。
「Simple Calendar」は月間カレンダー、週間カレンダーなど日付指定をしてカレンダーを作成することができるとても便利なGemとなっています。
それでは「Simple Calendar」を使用してみましょう。
＼単月定額と比べて総額最大48,000円OFF!／
学び応援キャンペーン実施中!
コスパ最高! 月額1,980円〜利用できる!
- 侍テラコヤ ⇒ お得にRuby on Railsを学ぶ!
・コスパ最高! 月額1,980円〜利用できる!
・単月定額と比べて総額最大48,000円OFF!
・学び応援キャンペーン実施中! - Freeks ⇒ 無料説明会に申し込む!
・現役エンジニアに質問し放題のオンラインプログラミングスクール
・月額10,780円で受講し放題!
・無料説明会実施中!
- TechAcademy ⇒ 無料体験レッスンに申し込む!
・Ruby/Ruby on Railsだけでなく、Git/GitHub、HTML/CSS、Bootstrap、SQL、Heroku、Web API、Vue.jsなど幅広く学ぶことができる
・今まで得た知識をアウトプットするために自分の作りたいWebサービスを作る
・無料体験レッスン実施中!
- CodeCamp ⇒ 無料体験レッスンに申し込む!
・出品・購入機能付きフリマサイト、グルメサイト、画像投稿サイト、いいね機能、フォロー機能などを作りながらRuby on Railsを学べる
・無料体験レッスン実施中!
目次
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を学習している皆様にオススメの教材をご紹介させていただきます。
Ruby on Rails 6 実践ガイド impress top gearシリーズ
Ruby on Rails 6 実践ガイド[機能拡張編]
パーフェクト Ruby on Rails 【増補改訂版】
＼単月定額と比べて総額最大48,000円OFF!／
学び応援キャンペーン実施中!
コスパ最高! 月額1,980円〜利用できる!
- 侍テラコヤ ⇒ お得にRuby on Railsを学ぶ!
・コスパ最高! 月額1,980円〜利用できる!
・単月定額と比べて総額最大48,000円OFF!
・学び応援キャンペーン実施中! - Freeks ⇒ 無料説明会に申し込む!
・現役エンジニアに質問し放題のオンラインプログラミングスクール
・月額10,780円で受講し放題!
・無料説明会実施中!
- TechAcademy ⇒ 無料体験レッスンに申し込む!
・Ruby/Ruby on Railsだけでなく、Git/GitHub、HTML/CSS、Bootstrap、SQL、Heroku、Web API、Vue.jsなど幅広く学ぶことができる
・今まで得た知識をアウトプットするために自分の作りたいWebサービスを作る
・無料体験レッスン実施中!
- CodeCamp ⇒ 無料体験レッスンに申し込む!
・出品・購入機能付きフリマサイト、グルメサイト、画像投稿サイト、いいね機能、フォロー機能などを作りながらRuby on Railsを学べる
・無料体験レッスン実施中!