[備忘録]railsでfullcalendar表示させてみた

6076 ワード
Gem Ruby Rails jQuery Ruby テキストリンク

はじめに

現在個人アプリ制作をしており、予約機能を実装するためgem「fullcalendar」を使いました。
これから紹介する手順を踏んで行けば、とてつもなく簡単に実装できます。
そして自分が最強になったのかと感じてしまうはずです。。
自分の備忘録として掲載しますが、誰かの参考になれば嬉しいです。

ちなみに表示できたらこんな感じになります。

実装順序

　
　１.　表示用のアプリケーション作成

　２.　DBの作成

　３.　Gemfileの導入、fullcalendarの呼び出し

　４.　gemを使うための記述をする。

　５.　ビューファイルの編集

　６.　CSSの編集　　　以上！！！

１.表示用のアプリケーション作成、　２.DBの作成

　１．　まずはアプリを作成し、DBを作ります

$ rails _5.2.4.2_ new fullcalendar //newの隣には好きなアプリ名を入れてOK
$ cd fullcalendar
$ rails db:create

３.　Gemfileの導入、fullcalendarの呼び出し

ここでは実装に必要なGemを３つ入れていきます。

gem 'jquery-rails'   
gem 'fullcalendar-rails'
gem 'momentjs-rails'

$(document).ready(function(){
  $('#calendar').fullCalendar({
  });
});

//入力後、bundle install忘れずに！！

４.　gemを使うための記述をする。

jsファイルに下記記述をコピペしてください。元々の記述とかぶる部分があるのでそこは被せてしまって構いません。
これないとjQueryとか使えません…

application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require moment
//= require fullcalendar
//= require_tree

５.　ビューファイルの編集

魔法のように一行入れるだけでOK（hamlでの記述になり申し訳ない）
※hamlとHTMLの記述を翻訳してくれるサイトもあるので是非ご活用ください。
　https://htmltohaml.com/

views/index.html.haml
 #calendar //これだけですww

　６.　CSSの編集

ちなみにこんな感じでうまく画面の真ん中に表示されます。

#calendar {
  margin: 0 auto;
  width: 700px;
  text-align: center;
  position: fixed;
  top: 90px;
  bottom: 0;
  left: 0;
  right: 0;
 }
application.css
*= require_tree .
 *= require_self
 *= require fullcalendar
 */

実装は以上になります！！

　

終わりに

こんな簡単に実装できるのに、私はいつのまにかapplication.jsを消していたようで全然表示されず、放置しかけてました。しかしなんとかgithubを活用し復活させ、無事に実装することができました。

まだまだこんな簡単な記事しかかけませんが、わからないこと、より改善できることがありましたらコメント下さい。
最後まで見ていただき、ありがとうございました😭