fullcalendar 予約後の時間表記の日本語化

補足情報

OS macbookpro catalina 10.15.3
ruby 2.3.1p112
Rails 5.2.4.2
rbenv 1.1.2-28-gc2cfbd1

参考にした記事

https://qiita.com/syukan3/items/68280ce4ff45aa336363

質問内容

ruby on rails でスタジオ予約サイト作っています。参考記事通り、rails new した後に、scaffoldで各ファイルを作り、fullcalendarを実装しています。
完成後、アプリでスタジオ予約したら、時間表記が2020-04-28 14:00:00 UTCと表記されます。
これを2020年4月28日(火)14:00と表記させたいのですが、他の記事で調べても自分と同じようにrails scaffoldでfullcalendarを作ってる人がいなかったり、バージョン（？）が違ったり、構築方法が違ったりで解決できずにいます。
apllication.jsファイルに適切なコードを書けば解決するのでは？と思ってるのですが、それが見つかりません。どなたかご存知の方おられましたらご教授よろしくお願いします。

該当のソースコード

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require moment
//= require fullcalendar
//= require fullcalendar/lang/ja
//= require_tree .

$(function () {
    // 画面遷移を検知
    $(document).on('turbolinks:load', function () {
        if ($('#calendar').length) {

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

            $(document).on('turbolinks:load', function () {
                Calendar();
            });
            $(document).on('turbolinks:before-cache', clearCalendar);

            //events: '/events.json', 以下に追加
            $('#calendar').fullCalendar({
                events: '/events.json',
                //カレンダー上部を年月で表示させる
                titleFormat:'YYYY年 M月',
                //曜日を日本語表示
                dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
                //ボタンのレイアウト
                header: {
                    left: '',
                    center: 'prev title next',
                    right: 'month agendaWeek agendaDay today'
                },
                //終了時刻がないイベントの表示間隔
                defaultTimedEventDuration: '03:00:00',
                buttonText: {
                    prev: '前',
                    next: '次',
                    prevYear: '前年',
                    nextYear: '翌年',
                    today: '今日',
                    month: '月',
                    week: '週',
                    day: '日'
                },
                firstDay : 1,
                allDaySlot: true,
        　　　　　// 終日スロットのタイトル
        　　　　　allDayText: '終日',
                // Drag & Drop & Resize
                editable: false,
                //イベントの時間表示を２４時間に
                timeFormat: "HH:mm",
                //イベントの色を変える
                eventColor: '#87cefa',
                //イベントの文字色を変える
                eventTextColor: '#000000',
                eventRender: function(event, element) {
                    element.css("font-size", "0.8em");
                    element.css("padding", "5px");
                }
            });
        }
    });
});

<div class="header">
<h1>軽音スタジオ予約サイト</h1>
</div>

<p id="notice"><%= notice %></p>

<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>備考</th>
      <th>開始</th>
      <th>終了</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @events.each do |event| %>
      <tr>
        <td><%= event.title %></td>
        <td><%= event.body %></td>
        <td><%= event.start_date %></td>
        <td><%= event.end_date %></td>
        <td><%= link_to '詳細', event %></td>
        <td><%= link_to '編集', edit_event_path(event) %></td>
        <td><%= link_to '削除', event, method: :delete, data: { confirm: '削除しますか?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to '予約画面へ進む', new_event_path %>

<div id="calendar"></div>

kazchimo

2020/05/03 06:42

このソースコードだけだとfullcalendar自身の部分しかわからないのかなと思います。変更したい箇所はfullcalendarの上のリスト表示の部分だと思いますので、その部分に該当するソースコードがもしありましたら、それを載せたほうがいいと思います。

GAD0244

2020/05/03 09:35

kazchimoさま追記依頼ありがとうございます！確かにそうですね…。追記しますのでよろしくお願いします！また何かございましたらご指摘よろしくお願いします！

行動規範の内容に同意します

回答1件

ベストアンサー

ruby
1      <td><%= event.start_date %></td>
2      <td><%= event.end_date %></td>

この部分が実際に表示される開始と終了の実装になる思われます。
event.start_dateとevent.end_dateを「2020年4月28日(火)14:00~」のフォーマットに整形して表示することができれば目的は達成できるはずです。
start_dateとend_dateはrubyのDateもしくはDateTimeクラスだと考えられるため具体的には以下の２処理が必要です。