【Rails】FullCalendarを使う

![ 2021-01-19 18.06.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/c2fe5709-d340-39f5-6691-1975b18f4eb3.png)

## 予定を保存するテーブルとモデルを作成
例として、`seminars`テーブルとモデルを作ります。

```zsh
$ rails g model seminar title starts_at:datetime ends_at:datetime
$ rails db:migrate
```

## 予定を管理するコントローラーとルーティングを作成
```zsh
$ rails g controller seminars index
```
```app/controllers/seminars_controller.rb
class SeminarsController < ApplicationController
  def index
    @seminars = Seminar.all
  end
end
```
```config.routes.rb
resources :seminars, only: [:index]
```

## 予定のダミーデータを投入
```zsh
$ rails c
2.6.3 :001 > Seminar.create(title: 'サンプルセミナー', starts_at: Time.zone.now, ends_at: Time.zone.now)
```


## Gemを追加
```rb:Gemfile
gem 'jquery-rails', '4.3.3'
gem 'fullcalendar-rails'
gem 'momentjs-rails'
```
```zsh
$ bundle install
```
```app/assets/javascript/application.js
//= require jquery
//= require moment
//= require fullcalendar
```

## カレンダーを表示するスクリプトを記述
```app/assets/javascript/application.js
$(function () {
    $(document).on('turbolinks:load', function () {
        function eventCalendar() {
            return $('#calendar').fullCalendar({});
        };
        function clearCalendar() {
            $('#calendar').html('');
        };
        $(document).on('turbolinks:load', function () {
          eventCalendar();
        });
        $(document).on('turbolinks:before-cache', clearCalendar);
    });
});
```

## CSSの設定
```app/assets/stylesheets/application.css
...
 *= require_tree .
 *= require_self
 *= require fullcalendar
 */
```

## カレンダーの表示領域を作成
```erb:app/views/seminars/index.html
<div id="calendar"></div>
```
これで空のカレンダーが表示されます。
![ 2021-01-19 16.31.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/7be1f237-112c-a9a9-65ec-973eafad10f0.png)

## 予定を表示
```zsh
$ touch app/views/seminars/index.json.jbuilder
```
```app/views/seminars/index.json.jbuilder
json.array!(@seminars) do |seminar|
  json.extract! seminar, :id, :title
  json.start seminar.starts_at
  json.end seminar.ends_at
end
```
↑の記述で/seminars.jsonにアクセスした時に以下のデータが返ってくるようになる。

```json
[
   {
      "id":1,
      "title":"サンプルセミナー",
      "start":"2021-01-19T07:57:23.329Z",
      "end":"2021-01-19T07:57:23.329Z"
   },
   {
      "id":2,
      "title":"ホゲホゲセミナー",
      "start":"2021-01-19T07:57:23.329Z",
      "end":"2021-01-19T07:57:23.329Z"
   },
...
]
```
最後にイベントを表示するスクリプトを追加して完成。

```app/assets/javascript/application.js
$(function () {
    $(document).on('turbolinks:load', function () {
        function eventCalendar() {
            return $('#calendar').fullCalendar({});
        };
        function clearCalendar() {
            $('#calendar').html('');
        };
        $(document).on('turbolinks:load', function () {
          eventCalendar();
        });
        $(document).on('turbolinks:before-cache', clearCalendar);
        //以下を追加
        $('#calendar').fullCalendar({
          events: '/seminars.json'
        });
    });
});
```
![ 2021-01-19 18.06.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/c2fe5709-d340-39f5-6691-1975b18f4eb3.png)


## オプション
[FullCalendarの日本語化やオプションいろいろ | Fire Sign Blog](https://blog.fire-sign.info/156/)

## ajaxでイベントを登録
- [Railsでfullcalendarを使ってみる(Ajax通信でイベント登録) - Qiita](https://qiita.com/denkikairo/items/2d46d4816006a5f68b06)

## 参考
- [RailsでFullCalendarを使って予定を表示するまで - Qiita](https://qiita.com/sasasoni/items/fb0bc1644ece888ae1d4)
- [Railsのjbuilderの書き方と便利なイディオムやメソッド - Qiita](https://qiita.com/ryouzi/items/06cb0d4aa7b6527b3645)