rails fullcalendarで予定を表示したい

Question

前提・実現したいこと

rails初心者で初投稿です。うまく問題を言語化できているかわかりませんがよろしくお願いいたします。
railsでfullcalendarのgemを使って予定表アプリを作りたいと思っています。

railsでfullcalendarを使い予定を追加してカレンダー上で表示させたいのですが、追加した予定がカレンダーに表示されません。
㏈を見る限り予定の追加はうまくいっているようです。

jsコード

/application.js

$(function () {


  $(document).on('turbolinks:load', function (){
    if ($('#calendar').length) {

      function eventCalendar() {
          return $('#calendar').fullCalendar({
          });
      };

      function clearCalendar() {
          $('#calendar').html('');
      };

      $(document).on('turbolinks:load', function () {
        eventCalendar();
      });

      $(document).on('turbolinks:before-cache', clearCalendar);

      $('#calendar').fullCalendar({
        
        locale: 'ja',
        height: 'auto',
        titleFormat: 'YYYY年 M月',
        dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay'
        },
        buttonText: {
          prev: '前',
          next: '次',
          prevYear: '前年',
          nextYear: '翌年',
          today: '今日',
          month: '月',
          week: '週',
          day: '日'
      },
      　timeFormat: "HH:mm",
        navLinks: true,
        selectable: true,
        selectHelper: true,

        timezone: 'UTC',
        editable: true
        
      });
    };
  });
});

###controller

/events_controller.rb

class EventsController < ApplicationController
  before_action :set_event, only: [:show, :edit, :update, :destroy]

  # GET /events
  # GET /events.json
  def index
    @events = Event.all
  end

  # GET /events/1
  # GET /events/1.json
  def show
  end

  # GET /events/new
  def new
    @event = Event.new
  end

  # GET /events/1/edit
  def edit
  end

  # POST /events
  # POST /events.json
  def create
    @event = Event.new(event_params)

    respond_to do |format|
      if @event.save
        format.html { redirect_to @event, notice: '予定を作成しました' }
        format.json { render :show, status: :created, location: @event }
      else
        format.html { render :new }
        format.json { render json: @event.errors, status: :unprocessable_entity }
      end
    end
  end

  # PATCH/PUT /events/1
  # PATCH/PUT /events/1.json
  def update
    respond_to do |format|
      if @event.update(event_params)
        format.html { redirect_to @event, notice: '予定を変更しました' }
        format.json { render :show, status: :ok, location: @event }
      else
        format.html { render :edit }
        format.json { render json: @event.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /events/1
  # DELETE /events/1.json
  def destroy
    @event.destroy
    respond_to do |format|
      format.html { redirect_to events_url, notice: '予定を削除しました' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_event
      @event = Event.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def event_params
      params.require(:event).permit(:title, :description, :income, :expense, :start_date, :end_date)
    end
end

###_jbuilder

_event.json.jbuilder

json.extract! event, :id, :title, :description, :income, :expense, :start_date, :end_date, :created_at, :updated_at
json.url event_url(event, format: :json)
json.array!(@events) do |event|
    json.extract! event, :id, :title, :description, :income, :expense
    json.start event.start_date   
    json.end event.end_date   
    json.url event_url(event, format: :html) 
  end

###routes

Rails.application.routes.draw do
  resources :events
  devise_for :users
 
  root 'events#index'

end

試したこと

.fullCalendar( ‘renderEvent’, event [, stick ] )を入れてみたりしました
また、turbolinksが邪魔をしていると書いてあるサイトもあったのでapplication.jsから//= require turbolinksを消してみましたが、カレンダーが表示されなくなっただけでした。

こんな感じで参考にしたサイトを見て色々コードを書いてみたのですが、予定の表示だけがうまくいきません…

追記
https://qiita.com/fukumura/items/23d834ad3d3df9236769
上記のサイトのjsコードを丸々コピーすると表示自体はできました。

しかし、下記のように登録自体はできず、画像をリロードすると消えてしまいます。

参考にしたサイト

https://qiita.com/sasasoni/items/fb0bc1644ece888ae1d4
https://qiita.com/aokiyasuhiro8376/items/34b5689c979877c6432a
https://qiita.com/syukan3/items/68280ce4ff45aa336363
https://oyaoya1123.hatenablog.com/entry/2019/10/10/003632

Comments

[neko_daisuki]

パット見た感じ、

$('#calendar').fullCalendar({ の中に events: '/events.json' が見当たりません。

_event.json.jbuilder がどのアクションから呼ばれているのか不明です。
ブラウザでhttp://localhost:3000/events.jsonを開き、jsonが表示されるか確認してください。

追記の参考サイトでは
type: "post",
url: "/events/create",
としていますが、定義されていません。
url: "/events",
に変更してみてください。

[Heiho-]

きづかずに申し訳ありません！
返信ありがとうございます
events: '/events.json'を追加してもダメだったのですが、色々調べているとjsonファイルの記述がおかしかったようです。

Answer 1

jsonファイルの
json.extract! event, :id, :title, :description, :income, :expense, :start_date, :end_date, :created_at, :updated_at
json.url event_url(event, format: :json)
の部分が余計だったようです。