JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<div class="wrap">
    <div class="site site-1">
        <div class="rent-info">
            <div class="rent-info-title">1F 實驗劇場 Experimental Theater 出租狀況</div>  
            <div class="rent-info-time">A-10:00-14:00、B-14:00-18:00、C-18:00-22:00</div>
        </div>			
        
        <div class="calendar">				
            <div class="header">
                <button onclick="prevMonth(0,'')"><<上個月</button>
                <h2 class="month-year">二月 2024</h2>
                <button onclick="nextMonth(0,'')">下個月>></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 calendar-days">
                <!-- Days will be dynamically populated here -->
            </div>
        </div>
    </div>
    
     <div class="site site-2">
        <div class="rent-info">
            <div class="rent-info-title">2F 藝文空間Gallery  出租狀況</div>  
            <div class="rent-info-time">A-10:00-14:00、B-14:00-18:00、C-18:00-22:00</div>
        </div>			
        
        <div class="calendar">				
            <div class="header">
                <button onclick="prevMonth(1,'2F')"><<上個月</button>
                <h2 class="month-year">二月 2024</h2>
                <button onclick="nextMonth(1,'2F')">下個月>></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...

CSS

:root {
			  --c1: #CEB379;        
			  --c2: #967039;        
			  --c3: #453724;  	   
			  --wcd:#000;
			  --wcl:#fff;
			}
			
			body {
				font-family: Arial, sans-serif;
			}
			
			.wrap {
				max-width: 900px;
				margin: auto;
				text-align: center;
			}
			
			.site{
				margin-bottom:15px;
			}
			
			.rent-info{
				text-align:left;
			}
			
			.rent-info > div
			{
				width: 400px;
				text-align: center;
			}
			
			    
			.site .rent-info-time{
				background-color: var(--wcl);
				box-shadow: #333 1px 1px 4px 0px;  
				width: 398px;
			}
			
			.rent-info-title{
				background-color: var(--c1);
			}
			
		    .rent-info-time{				
				color: var(--c2);			
			}

			.calendar {
				max-width: 100%;
				margin: auto;
				text-align: center;
			}

			.header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				align-content: stretch;
				align-items: center;
				color:var(--c3);
			}
			
			.header button{
				line-height: 32px;
				height: 32px;
				box-shadow: #333 1px 1px 4px 0px;
				width: 100px;
				line-height: 24px;
				font-size: 16px;
				border: 1px solid var(--c2);
				cursor: pointer;
			}
			
			button{
				background-color: var(--c1);
			}
					

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

			.weekday {
				font-weight: bold;
				text-align: center;
				min-width: 122px;
				    margin-bottom: 2px;
			}
			
			
		    .weekday {
				background: var(--c1);
			}

			.day {				
				padding: 10px;
				text-align: center;
			}
			
			.day {	
				border: 1px solid var(--c1);
			}
			
			
			.room-status {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 5px;
			}

			.room {
				    width: 100px;
					line-height: 24px;
					font-size: 16px;   
					margin-top: 5px;
			}
			
			.rented {
				background-color: var(--c3);
				color:var(--wcl);
			}			
			
						
			.rented {
				box-shadow: #333 1px 1px 4px...

JavaScript

// 預先定義的 JSON 房間狀態數據
			const Site1_roomStatusData = {
			  "2024-01-01": {"A": true , "B": false, "C": true  },
			  
			  "2024-02-01": {"A": true , "B": false, "C": true  },
			  "2024-02-02": {"A": false, "B": true,  "C": false },
			  "2024-02-03": {"A": false, "B": true,  "C": false },
			  "2024-02-04": {"A": false, "B": true,  "C": false },
			  "2024-02-05": {"A": false, "B": true,  "C": false },
			  "2024-02-06": {"A": false, "B": true,  "C": false },
			  "2024-02-07": {"A": false, "B": true,  "C": false },
			  "2024-02-08": {"A": true , "B": false, "C": true  },
			  "2024-02-09": {"A": false, "B": true,  "C": false },
			  "2024-02-10": {"A": false, "B": true,  "C": false },
			  "2024-02-11": {"A": false, "B": true,  "C": false },
			  "2024-02-12": {"A": false, "B": true,  "C": false },
			  "2024-02-13": {"A": false, "B": true,  "C": false },
			  "2024-02-14": {"A": false, "B": true,  "C": false },
			  "2024-02-15": {"A": true , "B": false, "C": true  },
			  "2024-02-16": {"A": false, "B": true,  "C": false },
			  "2024-02-17": {"A": false, "B": true,  "C": false },
			  "2024-02-18": {"A": false, "B": true,  "C": false },
			  "2024-02-19": {"A": false, "B": true,  "C": false },
			  "2024-02-20": {"A": false, "B": true,  "C": false },
			  "2024-02-21": {"A": false, "B": true,  "C": false },
			  "2024-02-22": {"A": true , "B": false, "C": true  },
			  "2024-02-23": {"A": false, "B": true,  "C": false },
			  "2024-02-24": {"A": false, "B": true,  "C": false },
			  "2024-02-25": {"A": false, "B": true,  "C": false },
			  "2024-02-26": {"A": false, "B": true,  "C": false },
			  "2024-02-27": {"A": false, "B": true,  "C": false },
			  "2024-02-28": {"A": false, "B": true,  "C": false },
			  
			  "2024-03-31": {"A": true , "B": false, "C": true  },
			  // ... 其他日期的房間狀態
			};
			
			const Site2_roomStatusData = {
			  "2024-03-31": {"A": true , "B": false, "C": true  },
			  "2024-02-01": {"A": false ,"B": false, "C": false },
			 ...