
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/mainpage.css">
</head>
<body>
    <div id="calendar-container">
        <h2></h2>
        <div id="month-year-selector">
            <span id="current-month"></span>
            <button onclick="previousMonth()">前月</button>
            <button onclick="nextMonth()">次月</button>
            <select id="month-selector" onchange="changeMonth()">
                <option value="0">1月</option>
                <option value="1">2月</option>
                <option value="2">3月</option>
                <option value="3">4月</option>
                <option value="4">5月</option>
                <option value="5">6月</option>
                <option value="6">7月</option>
                <option value="7">8月</option>
                <option value="8">9月</option>
                <option value="9">10月</option>
                <option value="10">11月</option>
                <option value="11">12月</option>
            </select>
            <select id="year-selector" onchange="changeYear()">
                <!-- 2020年から2050年までの範囲を指定 -->
            </select>
        </div>
        <table id="calendar">
            <thead>
                <tr>
                    <th>日</th>
                    <th>月</th>
                    <th>火</th>
                    <th>水</th>
                    <th>木</th>
                    <th>金</th>
                    <th>土</th>
                </tr>
            </thead>
            <tbody id="calendar-body"></tbody>
        </table>
    </div>
    <div id="schedule-data" style="display: none;">
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-15" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-16" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-17" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-18" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-19" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-20" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-21" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-22" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-23" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-24" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-25" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-26" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-27" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-28" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-29" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-30" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/BH_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/CE_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/CH_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/CJ_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/EE_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/EH_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/EJ_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/GH_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/HH_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/JE_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/JH_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/JJ_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/KH_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/ME_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/MH_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/MJ_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/PH_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/SE_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/SH_ratio.csv"></div>
<div data-date="2024-01-31" data-schedule="0, Start" data-source="userdata/3333/SJ_ratio.csv"></div>

    </div>
    <div class="details">
        <h3>Details</h3>
        <div class="details" id="date-details">
            <!-- 日付ごとの詳細スケジュールがここに表示されます -->
        </div>
    </div>
    <link rel="stylesheet" href="../static/mainpage.js">

    <script>
var currentMonth;
var currentYear;

document.addEventListener("DOMContentLoaded", function () {
    currentMonth = new Date().getMonth();
    currentYear = new Date().getFullYear();
    updateCalendar(currentMonth, currentYear);
    populateYearSelector();
});

function updateCalendar(month, year) {
    var calendarContainer = document.getElementById('calendar-body');
    var monthYearText = document.getElementById('current-month');
    var calendar = document.getElementById('calendar');
    var daysInMonth = new Date(year, month + 1, 0).getDate();
    var firstDay = new Date(year, month, 1).getDay();
    var lastDay = new Date(year, month, daysInMonth).getDay();

    monthYearText.innerText = year + "年 " + (month + 1) + "月";
    calendar.innerHTML = '';

    // Create header row
    var headerRow = document.createElement('tr');
    ["日", "月", "火", "水", "木", "金", "土"].forEach(function (day) {
        var th = document.createElement('th');
        th.innerText = day;
        headerRow.appendChild(th);
    });
    calendar.appendChild(headerRow);

    // Create calendar rows
    var row = document.createElement('tr');
    var dayCount = 1;

    for (var i = 0; i < firstDay; i++) {
        var td = document.createElement('td');
        td.className = 'off';
        row.appendChild(td);
    }

    for (var day = 1; day <= daysInMonth; day++) {
        var td = document.createElement('td');
        var dateStr = year + "-" + (month + 1).toString().padStart(2, '0') + "-" + day.toString().padStart(2, '0');
        var schedule = getScheduleForDate(dateStr);

        if (dateStr === getCurrentDate()) {
            td.className = 'today';
        }

        td.innerText = day;
        td.onclick = function () {
            showDetails(dateStr, schedule);
        };

        row.appendChild(td);

        if ((firstDay + dayCount) % 7 === 0) {
            calendar.appendChild(row);
            row = document.createElement('tr');
        }

        dayCount++;
    }

    for (var i = lastDay + 1; i < 7; i++) {
        var td = document.createElement('td');
        td.className = 'off';
        row.appendChild(td);
    }

    calendar.appendChild(row);

    // 日付がクリックされたときのイベントを追加
    calendar.addEventListener('click', function (event) {
        if (event.target.tagName === 'TD' && event.target.innerText !== '') {
            var selectedDate = year + "-" + (month + 1).toString().padStart(2, '0') + "-" + event.target.innerText;
            showDetails(selectedDate, getScheduleForDate(selectedDate));
        }
    });
}

function populateYearSelector() {
    var yearSelector = document.getElementById('year-selector');
    for (var year = 2020; year <= 2050; year++) {
        var option = document.createElement('option');
        option.value = year;
        option.innerText = year;
        yearSelector.appendChild(option);
    }
    yearSelector.value = currentYear;
}

function previousMonth() {
    currentMonth--;
    if (currentMonth < 0) {
        currentMonth = 11;
        currentYear--;
    }
    updateCalendar(currentMonth, currentYear);
}

function nextMonth() {
    currentMonth++;
    if (currentMonth > 11) {
        currentMonth = 0;
        currentYear++;
    }
    updateCalendar(currentMonth, currentYear);
}

function changeMonth() {
    currentMonth = parseInt(document.getElementById('month-selector').value);
    updateCalendar(currentMonth, currentYear);
}

function changeYear() {
    currentYear = parseInt(document.getElementById('year-selector').value);
    updateCalendar(currentMonth, currentYear);
}

function getScheduleForDate(date) {
    // 初期化: 空のオブジェクトの配列
    var scheduleInfoArray = [];

    // 'schedule-data'というIDを持つHTML要素を取得
    var scheduleData = document.getElementById('schedule-data');

    // 'schedule-data'要素が存在する場合の処理
    if (scheduleData) {
        // 'schedule-data'の子要素（日付ごとのデータ）を配列に変換
        var dateIndices = Array.from(scheduleData.children).reduce(function (indices, element, index) {
            // 配列内の各要素の中から、指定された日付に対応する要素のインデックスを取得
            if (element.getAttribute('data-date') === date) {
                indices.push(index);
            }
            return indices;
        }, []);

        // 指定された日付に対応するデータが見つかった場合
        if (dateIndices.length > 0) {
            dateIndices.forEach(function (dateIndex) {
                // 該当する日付のデータからスケジュール情報とデータソースを取得
                var scheduleInfo = {
                    schedule: scheduleData.children[dateIndex].getAttribute('data-schedule'),
                    source: scheduleData.children[dateIndex].getAttribute('data-source')
                };
                scheduleInfoArray.push(scheduleInfo);
            });
        }
    }


    console.log(scheduleInfoArray)
    // 取得したスケジュール情報とデータソースを含むオブジェクトの配列を返す
    return scheduleInfoArray;
}

function getCurrentDate() {
    var today = new Date();
    return today.getFullYear() + "-" + (today.getMonth() + 1).toString().padStart(2, '0') + "-" + today.getDate().toString().padStart(2, '0');
}

function showDetails(date, scheduleInfoArray) {
    var details = document.getElementById('date-details');
    details.innerHTML = '';  // 前の内容をクリア

    var sourceDictionary = createSourceDictionary();

    if (scheduleInfoArray.length > 0) {
        scheduleInfoArray.forEach(function (scheduleInfo) {
            var scheduleItems = scheduleInfo.schedule.split(', ');
            for (var i = 0; i < scheduleItems.length; i += 2) {
                var unit = scheduleItems[i];
                var description = scheduleItems[i + 1];
                var sourceName = sourceDictionary[scheduleInfo.source] || scheduleInfo.source;

                var span = document.createElement('span');
                // リンク先を変更
                span.innerHTML = `<a href="kyouzai/${sourceName}/${unit}.html" target="_blank">${unit}:${description}(${sourceName})</a>`;
                details.appendChild(span);
            }
        });
    }
}



function createSourceDictionary() {
    // ユーザー名を取得
    var username = "{{ session['username'] }}";  // Flaskテンプレートエンジンの場合

    // データソースとその対応する情報を辞書に登録
    var sourceDictionary = {
        [`userdata/${username}/ME_ratio.csv`]: "数学",
        [`userdata/${username}/SE_ratio.csv`]: "理科",
        [`userdata/${username}/JE_ratio.csv`]: "国語"
        // 他のデータソースに対する対応関係も追加できます
    };

    return sourceDictionary;
}

</script>
