FullCalendar（v5.5.1）で週間カレンダーの中身に「予約可◎」を表示させたいです。

Question

javascriptライブラリのFullCalendar（5.5.1）を使用して１週間分のカレンダーを作成しています。
現在は以下のような表示です。

実現したいのは、
・全ての時間枠に「予約可[改行]◎」と表示させたいです。
（可能なら３０分単位。「終日」の箇所にも表示させたいです。）
の２点です。

具体的には以下のイメージです。

現状のコードは以下のとおりです。

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
 		locale: 'ja',
     headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: '',
      },
      initialView: 'timeGridWeek',
      firstDay: (new Date()).getDay(),
      validRange: {
        start: new Date()
      },
      businessHours: true,
      editable: true,
      selectable: true,
      slotMinTime: '09:00:00',
      slotMaxTime: '22:00:00',
      slotDuration: '00:15:00',
      slotLabelInterval: '00:30',
      slotLabelFormat: {
        hour: 'numeric',
        minute: '2-digit',
        omitZeroMinute: false,
        meridiem: 'short'
      },			
      events: []
    });

    calendar.render();
  });

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

お知恵をお貸しください。
よろしくお願いします。

Comments

[m.ts10806]

タイトルが同じです。
https://teratail.com/questions/318715

[m.ts10806]

この感じだと、前の質問のタイトルを変更したほうが良いです。
「要件」なので、そのまま「解決したいこと」になります。

[tmkky]

ありがとうございます。
前の内容のタイトルを編集しました。

Answer 1

・全ての時間枠に「予約可[改行]◎」と表示させたいです。

（可能なら３０分単位。「終日」の箇所にも表示させたいです。）

予定タイトルに改行は含められないようで、\nなどを書いても取り除かれてしまう。
後はできているかな。

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');

    var eventsArray = (function () {
        var startTime = new Date(new Date().setHours(9, 0, 0, 0));
        var endTime = new Date(new Date().setHours(9, 30, 0, 0));

        var recurDate = new Date();
        var startRecur = `${recurDate.getFullYear()}-${('0' + (recurDate.getMonth() + 1)).slice(-2)}-${('0' + recurDate.getDate()).slice(-2)}`;
        recurDate.setDate(recurDate.getDate() + 14); // 予約可能な日数
        var endRecur = `${recurDate.getFullYear()}-${('0' + (recurDate.getMonth() + 1)).slice(-2)}-${('0' + recurDate.getDate()).slice(-2)}`;

        arr = []
        // 終日
        arr.push({
            // daysOfWeek: [1, 2, 3, 4, 5], // 月曜から金曜までにするなら
            allDay: true,
            title: '予約可 ◎',
            startRecur: startRecur,
            endRecur: endRecur,
            textColor: 'black',
            color: 'transparent'
        });
        // 各時間
        while (startTime.getHours() < 22) {
            arr.push({
                // daysOfWeek: [1, 2, 3, 4, 5], // 月曜から金曜までにするなら
                title: '予約可 ◎',
                startTime: startTime.toLocaleTimeString(),
                endTime: endTime.toLocaleTimeString(),
                startRecur: startRecur,
                endRecur: endRecur,
                textColor: 'black',
                color: 'transparent'
            });
            startTime.setMinutes(startTime.getMinutes() + 30);
            endTime.setMinutes(endTime.getMinutes() + 30);
        }
        console.log(arr);
        return arr;
    })();

    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'ja',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'timeGridWeek'
        },
        initialView: 'timeGridWeek',
        firstDay: (new Date()).getDay(),
        validRange: {
            start: new Date()
        },
        slotLabelFormat: {
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: false
        },
        displayEventTime: false,
        displayEventEnd: false,
        businessHours: true,
        editable: true,
        selectable: true,
        slotMinTime: '09:00:00',
        slotMaxTime: '22:00:00',
        slotDuration: '00:15:00',
        slotLabelInterval: '00:30',
        events: eventsArray
    });

    calendar.render();
});

Comments

[tmkky]

ありがとうございます。
完璧です！
改行はCSSで対応できそうです。

大変助かりました！
ありがとうございました。