【Rails】Javascriptで作ったカレンダーに、保存したイベント情報を表示させたい

Question

前提・実現したいこと

Railsで、予定やTodoをカレンダーに表示できるシステムを作っています。
カレンダーはJavascriptを使ってなんとか表示することができました。
簡単な予定入力フォームも作り、フォーム情報が保存できることも確認できています。
そこで、保存したイベントのタイトルをカレンダー上の該当日に表示させる記述をしたいのですが、どう記述したら良いのか分かりません。ネットで記事も探しましたがfullcalendarを取り扱ったものが多く、自分のようにGemやライブラリを使わずにイベント表示するパターンはなかなか見つけられませんでした。１つだけ、ヒントになりそうなサイトを見つけ、demo.jsファイルを作って同じように記述してみましたが、ダメでした。どなたか解決方法をご教授頂けないでしょうか。よろしくお願い致します。

該当のソースコード

index.html.erb

<%= render "shared/header" %>
<div class="todo-countdown">
  カウントダウン表示
</div>
<table>
  <thead>
    <tr>
      <th id="prev">&laquo;</th>
      <th id="title" colspan="5">2020/05</th>
      <th id="next">&raquo;</th>
    </tr>
    <tr>
      <th>Sun</th>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <% @events.each do |event| %>
          <div>
            <%= event.title %>
          </div>
        <% end %>
      </th>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td id="today" colspan="7">Today</td>
    </tr>
  </tfoot>
</table>
<footer>
  フッター部分
</footer>

main.js

'use strict';

console.clear();

{
  const today = new Date();
  let year = today.getFullYear();
  let month = today.getMonth();

  function getCalendarHead() {
    const dates = [];
    const d = new Date(year, month, 0).getDate();
    const n = new Date(year, month, 1).getDay();

    for (let i = 0; i < n; i++) {
      // 30
      // 29, 30
      // 28, 29, 30
      dates.unshift({
        date: d - i,
        isToday: false,
        isDisabled: true,
      });
    }

    return dates;
  }

  function getCalendarBody() {
    const dates = []; // date: 日付, day: 曜日
    const lastDate = new Date(year, month + 1, 0).getDate();

    for (let i = 1; i <= lastDate; i++) {
      dates.push({
        date: i,
        isToday: false,
        isDisabled: false,
      });
    }

    if (year === today.getFullYear() && month === today.getMonth()) {
      dates[today.getDate() - 1].isToday = true;
    }

    return dates;
  }

  function getCalendarTail() {
    const dates = [];
    const lastDay = new Date(year, month + 1, 0).getDay();

    for (let i = 1; i < 7 - lastDay; i++) {
      dates.push({
        date: i,
        isToday: false,
        isDisabled: true,
      });
    }

    return dates;
  }

  function clearCalendar() {
    const tbody = document.querySelector('tbody');

    while (tbody.firstChild) {
      tbody.removeChild(tbody.firstChild);
    }
  }

  function renderTitle() {
    const title = `${year}/${String(month + 1).padStart(2, '0')}`;
    document.getElementById('title').textContent = title;
  }

  function renderWeeks() {
    const dates = [
      ...getCalendarHead(),
      ...getCalendarBody(),
      ...getCalendarTail(),
    ];
    const weeks = [];
    const weeksCount = dates.length / 7;

    for (let i = 0; i < weeksCount; i++) {
      weeks.push(dates.splice(0, 7));
    }

    weeks.forEach(week => {
      const tr = document.createElement('tr');
      week.forEach(date => {
        const td = document.createElement('td');

        td.textContent = date.date;
        if (date.isToday) {
          td.classList.add('today');
        }
        if (date.isDisabled) {
          td.classList.add('disabled');
        }

        tr.appendChild(td);
      });
      document.querySelector('tbody').appendChild(tr);
    });
  }

  window.addEventListener("DOMContentLoaded", function () {
    // DOMの準備が出来たら実行
    createCalendar();
  })
  function createCalendar() {
    clearCalendar();
    renderTitle();
    renderWeeks();
  }

  window.addEventListener("DOMContentLoaded", function () {
    document.getElementById('prev').addEventListener('click', () => {
      month--;
      if (month < 0) {
        year--;
        month = 11;
      }
    createCalendar();

  })

  });

  window.addEventListener("DOMContentLoaded", function () {
    document.getElementById('next').addEventListener('click', () => {
      month++;
      if (month > 11) {
        year++;
        month = 0;
      }
    createCalendar();
  })

  });

  
  window.addEventListener("DOMContentLoaded", function () {
    document.getElementById('today').addEventListener('click', () => {
      year = today.getFullYear();
      month = today.getMonth();
      createCalendar();
  })

  });

}

demo.js（エラーが出たため、コメントアウト中）

var events = [
  {'Date': new Date(2020, 12, 7), 'Title': '資格取得セミナー午後2時からセンタービル'},
  {'Date': new Date(2020, 12, 18), 'Title': '●●イベント開催', 'Link': 'https://yahoo.co.jp/'},
  {'Date': new Date(2020, 6, 27), 'Title': '〇〇企画創業20周年記念', 'Link': 'https://www.google.com/'},
];

var settings = {};
var element = document.getElement('caleandar');
caleandar(element, events, settings);

events_controller.rb

class EventsController < ApplicationController
  def index
    @events = Event.all
  end

  def new
    @event = Event.new
  end

  def create
    @event = Event.new(event_params)
    @event.save
    redirect_to root_path
  end

  private

  def event_params
    params.require(:event).permit(:title, :detail, :event_date, :start_date, :end_date, :category_id)
  end


end

マイグレーションファイル

class CreateEvents < ActiveRecord::Migration[6.0]
  def change
    create_table :events do |t|
      t.string :title
      t.text :detail
      t.date :event_date
      t.datetime :start_date
      t.datetime :end_date
      t.integer :category_id

      t.timestamps
    end
  end
end

試したこと

・index.htmlにあるように、<tbody>内の<th>要素にイベントタイトルを表示する記述をしてみる。→どこにも表示されず。→Javascriptで上書きされていると考えています。
・demo.jsの読み込み→エラーが出たのと、コードの意味が理解できず、コメントアウトにして保留中です。

補足情報（FW/ツールのバージョンなど）

Railsのバージョン　6.0.0

カレンダー内のどこかに表示することができれば、保存したデータの日付情報とカレンダーの日付情報を照らし合わせて表示させるといったやり方でできるのかなと思ったり、<th>要素にid属性やclass属性を付加できれば、GetElementById等で取り出しできるのにと思ったりしていますが、難航しています。そもそものアルゴリズムが間違っている可能性もあるので、様々な角度からのご指摘・ご助言等頂けたら幸いです。

現状のブラウザ画面

---

2020/12/11追記
main.jsに以下のコードを加えることで、日付１つ１つの要素にid属性を付加することができました。後は、この要素を親要素として「子要素１（日付表示）」、「子要素２（イベント名）」を作り、カレンダーの日付情報と登録したイベントの日付が同じ時に、その場所にイベント名を表示させる記述ができればと思っていますが、要素の追加、JavascriptでRailsのインスタンス変数を受け渡しにつまづいています。gonというGemを導入してevents.controller.rbに「gon.events = @events」と設定しましたが、「@events.each do」のJavascript版の記述が分からず、サイトを彷徨っています。参考サイトの紹介などでも構いませんので、解決の糸口を一緒に探して頂けないでしょうか？よろしくお願い致します。

〜省略〜
    weeks.forEach(week => {
      const tr = document.createElement('tr');
      week.forEach(date => {
        const td = document.createElement('td');

        td.textContent = date.date;
        if (date.isToday) {
          td.classList.add('today');
        }
        if (date.isDisabled) {
          td.classList.add('disabled');
        }

        td.setAttribute('id', 'event_box') #ここに追加

        tr.appendChild(td);
      });
      document.querySelector('tbody').appendChild(tr);
    });
  }
〜省略〜

Answer 1

main.jsを以下のように編集することで、カレンダーの任意の場所に文字を表示させることができました。ただ、新たな課題が出てきたので、改めて質問をしようと思います。

〜省略〜
    weeks.forEach(week => {
      const tr = document.createElement('tr');
      week.forEach(date => {
        const td = document.createElement('td');

        
        
        td.textContent = date.date;
        if (date.isToday) {
          td.classList.add('today');
        }
        if (date.isDisabled) {
          td.classList.add('disabled');
        }
        
        td.setAttribute('id', 'event_box') #td要素にevent_boxというid属性を付加
        const title_box = document.createElement('div'); #div要素を生成
        title_box.setAttribute('id', 'title_box') #div要素にtitle_boxというid属性を付加
        title_box.textContent = '';
        
        const div = document.querySelector('td'); #td要素を選択
        td.appendChild(title_box); #選択したtd要素に、子要素としてdiv要素を追加
        
        const get_disabled = document.getElementsByClassName('disabled')

        console.log(date.date, month + 1, year);  // 日付要素確認用
        

        if (`${year}-${month + 1}-${date.date}` === '2020-12-12') {
          title_box.textContent = "タイトル表示"
        }

        tr.appendChild(td);
      });
      document.querySelector('tbody').appendChild(tr);
    });
  }

  window.addEventListener("DOMContentLoaded", function () {
    // DOMの準備が出来たら実行
    createCalendar();
  })
  function createCalendar() {
    clearCalendar();
    renderTitle();
    renderWeeks();
  }

  window.addEventListener("DOMContentLoaded", function () {
    document.getElementById('prev').addEventListener('click', () => {
      month--;
      if (month < 0) {
        year--;
        month = 11;
      }
    createCalendar();
〜省略〜

Answer 2

JavaScriptで非同期でサーバーからデータ取得してきて、JavaScriptでカレンダー作ってるロジックに入れ込むことになるのではと。
なので、カレンダー作ってるロジックを正しく理解し、どこにどのように入れれば任意の場所に情報を表示させられるか考えて検証するところから始めてください。

Comments

[tekeTECH]

アドバイスありがとうございます。main.jsで記述を入れるべき場所が分かり、そこに「td.setAttribute('id', 'event_box')」と記述してみると、カレンダーの日付１つ１つにid属性を付加することができました。「td.textContent = "ok"」などと入れると、日付の部分が全てokに変えることもできました。