소개

현재 개인 앱 제작을 하고 있으며 예약 기능을 구현하기 위해 gem "fullcalendar"를 사용했습니다.
앞으로 소개하는 절차를 밟아 가면 매우 쉽고 구현할 수 있습니다.
그리고 자신이 최강이 됐는지 느껴 버릴 것입니다. .
자신의 비망록으로서 게재합니다만, 누군가의 참고가 되면 기쁩니다.

덧붙여서 표시할 수 있으면 이런 느낌이 됩니다.

구현 순서

　
1. 표시용 어플리케이션 작성

2. DB의 작성

3. Gemfile의 도입, fullcalendar의 호출

4. gem을 사용하기 위한 기술을 한다.

5. 뷰 ​​파일 편집

6. CSS의 편집 　 이상! ! !

1.표시용의 어플리케이션 작성, 2.DB의 작성

1. 먼저 앱을 만들고 DB를 만듭니다.

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

3. Gemfile 도입, fullcalendar 호출

여기에서는 구현에 필요한 Gem을 3개 넣어 갑니다.

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

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

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

4. gem을 사용하기 위한 기술을 한다.

js 파일에 아래 설명을 복사하십시오. 원래의 설명과 쓰는 부분이 있으므로 거기는 씌워 버릴 수 있습니다.
이것없이 jQuery를 사용할 수 없습니다 ...

application.js

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

5. 뷰 ​​파일 편집

마법처럼 한 줄 넣는 것만으로 OK(haml로의 기술이 되어 죄송합니다)
※haml과 HTML의 기술을 번역해 주는 사이트도 있으므로 꼭 활용해 주세요.
htps://hml은 ml. 코m/

views/index.html.haml

 #calendar //これだけですww

6. 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를 활용하여 부활시켜 무사히 구현할 수있었습니다.

아직 이런 간단한 기사 밖에 걸리지 않습니다만, 모르는 것, 보다 개선할 수 있는 것이 있으면 댓글 주세요.
끝까지 봐 주셔서 감사합니다 😭