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">小劇場 出租狀況</div>  
            <div class="rent-info-time">A 9:00~12:30 /  B 13:30~17:00 /  C 18:00~21:30</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>

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

function openDatePicker() {
            document.getElementById('dateInput').showPicker();
        }
		
		function pickerDate() {
			console.log(
				document.getElementById('dateInput').value
			);