出租視作

by wllai2001

HTML

<div>OOO小劇場出租狀況表</div>
<div class="calendar">
    <div class="header">
        <button onclick="prevMonth()">Previous Month</button>
        <h2 id="month-year">February 2024</h2>
        <button onclick="nextMonth()">Next Month</button>
    </div>

    <div class="days">
        <div class="weekday">一</div>
        <div class="weekday">二</div>
        <div class="weekday">三</div>
        <div class="weekday">四</div>
        <div class="weekday">五</div>
        <div class="weekday">六</div>
        <div class="weekday">日</div>
    </div>

    <div class="days" id="calendar-days">
        <!-- Days will be dynamically populated here -->
    </div>
</div>

CSS

body {
            font-family: Arial, sans-serif;
        }

        .calendar {
            max-width: 900px;
            margin: auto;
            text-align: center;
        }

        .header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .weekday {
            font-weight: bold;
            text-align: center;
        }

        .day {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }

        .room-status {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 5px;
        }

        .room {
            width: 100px;
            line-height: 30px;
            /*border-radius: 50%;*/
            margin-top: 5px;
        }

        .rented {
            background-color: #ffa07a; /* Light Salmon */
        }

        .available {
            background-color: #90ee90; /* Light Green */
        }

JavaScript

// 函數用於更新日曆，顯示當前月份
function updateCalendar(year, month) {
    const calendarDays = document.getElementById('calendar-days');
    const monthYearHeader = document.getElementById('month-year');

    // 清空先前的內容
    calendarDays.innerHTML = "";

    // 在標頭中設置月份和年份
    monthYearHeader.innerText = new Date(year, month - 1).toLocaleString('default', { month: 'long', year: 'numeric' });

    // 獲取月份的第一天以確定一周的起始日
    const firstDayOfMonth = new Date(year, month - 1, 1);
    const startingDayOfWeek = firstDayOfMonth.getDay(); // 0（星期日）到 6（星期六）

    // 獲取月份的天數
    const daysInMonth = new Date(year, month, 0).getDate();

    // 動態創建日期元素，考慮一周的起始日
    for (let day = 1; day <= daysInMonth + startingDayOfWeek; day++) {
        const dayElement = document.createElement('div');
        dayElement.classList.add('day');

        // 檢查A、B、C是否在這一天被租用（可以替換此邏輯）
        const isRentedA = Math.random() < 0.3; // 示例邏輯，根據需要修改
        const isRentedB = Math.random() < 0.4;
        const isRentedC = Math.random() < 0.2;

        if (isRentedA || isRentedB || isRentedC) {
            dayElement.classList.add('已出租');
        } else {
            dayElement.classList.add('未出租');
        }

        // 顯示日期
        if (day > startingDayOfWeek) {
            dayElement.innerText = day - startingDayOfWeek;

            // 為每一天添加房間狀態
            const roomStatusDiv = document.createElement('div');
            roomStatusDiv.classList.add('room-status');

            // 房間A
            const roomA = document.createElement('div');
            roomA.classList.add('room', isRentedA ? 'rented' : 'available');
            roomA.innerText = isRentedA ? 'A - 已出租' : 'A - 未出租';
            roomStatusDiv.appendChild(roomA);

            // 房間B
            const roomB = document.createElement('div');
            roomB.classList.add('room', isRentedB ? 'rented' : 'available');
            roomB.innerText = isRentedB ? 'B - 已出租' : 'B - 未出租';
            roomStatusDiv.appendChild(roomB);

            // 房間C
        ...