改正：予約時刻表の雛形を作りました． #JavaScript

改正：予約時刻表の雛形を作りました．

雛形なので作りかけのようなものです．ここから可変すれば予約時刻表の機能が作れると思います．
ご自由にコピペでお使いいただけば幸いです．

index.php


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
    <style>
        table,
        th,
        tr,
        td {
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <table class="table table-hover" id='view'></table>
                <button id='btn' class="btn btn-primary" type="button">データを表示する</button>
                <textarea id="textData"></textarea>
            </div>
        </div>
    </div>
</body>
<script src="./asset/js/schedule.js?<?= time() ?>"></script>
<script src="./asset/js/main.js?<?= time() ?>"></script>

</html>

lib/Schedule.php

<?php
class Schedule
{
    /**
     * スケジュール一覧データを生成
     * @param int $yyyy
     * @param int $mm
     * @param int $dd
     * @param int $endday
     * @param int $TimeInterval
     * @return array
     */
    public function makeScheduleData($yyyy, $mm, $dd, $endday = 7, $TimeInterval = 30): array
    {
        $str = "";
        $isDate = [];
        $date = new DateTime();
        for ($h = 8; $h <= 22; $h++) {
            for ($m = 0; $m <= 59; $m = $m + $TimeInterval) {               
                for ($i = 1; $i <= $endday; $i++) {
                    if ($h === 8 && $m === 0) {
                        if(empty($isDate[$i])){
                            $isDate[$i] = $date->format("Y-m-d");
                            $date->modify('+1 day');
                        }
                    }                     
                    $days[] = [
                        'line' => $i,
                        'w' => (new DateTime($isDate[$i]))->format("w"),
                        'day' => $isDate[$i],
                        'time' => sprintf('%02d:%02d', $h, $m),
                    ];
                }
            }
        }
        return $days;
    }

    /**
     * スケジュールデータを取得する
     * @return mixed
     */
    public function getScheduleData(): mixed
    {
        $hasData = '';
        $yyyy = $_GET['yyyy'] ? (int)$_GET['yyyy'] : date('Y');
        $mm   = $_GET['mm'] ? (int)$_GET['mm'] : date('m');
        $dd   = $_GET['dd'] ? (int)$_GET['dd'] : date('d');
        $hasData = $this->makeScheduleData($yyyy, $mm, $dd);
        return json_encode($hasData);
    }
}

print (new Schedule)->getScheduleData();

asset/main.js


async function main(){
    //スケジュールデータを取得する
    let hasData = await getScheduleData();
    //スケジュールデータから表示用ヘッダー部分を取得する
    let headerScheduleData = viewScheduleHeaderData(hasData);
    //スケジュールデータから表示用ヘッダー部分以外を取得する
    let scheduleData = viewScheduleData(hasData);
    //スケジュールをクリックした時の挙動
    document.getElementById('view').innerHTML = headerScheduleData + scheduleData;
    [...document.querySelectorAll('.select')].forEach(elm=>{
        let inSelect = function(){
            if(!elm.classList.contains('close')){
                if(flg = elm.getAttribute('data-select')){
                    if(parseInt(flg)===1){
                        elm.setAttribute('data-select','0');
                        elm.style.backgroundColor  = "unset";
                    }else{
                        elm.setAttribute('data-select','1');
                        elm.style.backgroundColor  = "#0d6efd";
                    }
                }else{
                    elm.setAttribute('data-select','1');
                    elm.style.backgroundColor  = "#0d6efd";
                }    
            }
        };    
        //elm.addEventListener("mouseout",inSelect);
        elm.addEventListener("click", inSelect);
        elm.addEventListener("touchend",inSelect);
    });
    //ボタンを押下するとクリックしたデータを取得してテキストエリアに表示
    document.getElementById('btn').addEventListener('click',()=>{
        document.getElementById('textData').value = ((()=>{
            return (([...document.querySelectorAll('.select')].filter((elm,index)=>{
                return parseInt(elm.getAttribute('data-select')) == 1;
            })).map((elm,index)=>{
                return `data[${index}]=${elm.getAttribute('data-data')}`;
            })).join('&');
        }))();
    });
}
main();

asset/js/schedule.js

async function getScheduleData()
{
    let hasScheduleData = await fetch('./lib/Schedule.php').then(response=>response.json());
    return hasScheduleData;
}
function viewScheduleHeaderData(hasScheduleData)
{
    return (hasScheduleData.map((data,index)=>{
        let str = '';
        if(index === 0){
            str+= `<tr class='line${data?.line}'>`;
        }
        if(index >= 0 && index <= 6){
            str+= `<th class='' data-data='${data?.day},${data?.time}'>${data?.day}</th>`;
        }
        if(index === 6){
            str+= `</tr>`;
        }
        return str;
   })).join('');
}
function viewScheduleData(hasScheduleData)
{
   return (hasScheduleData.map((data)=>{
        let str = '';
        if(parseInt(data?.line) === 1){
            str+= `<tr>`;
        }
        str+= `<td class='time select' data-data='${data?.day},${data?.time}'>${data?.time}</td>`;
        if(parseInt(data?.line) === 7){
            str+= `</tr>`;
        }
        return str;
   })).join('');
}