<!DOCTYPE html>
<html>
<head>
<title>Calendar Component</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
color: #333;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.navigation {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.navigation button {
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
}
.navigation button:hover {
background-color: #555;
}
.current-month {
font-size: 24px;
font-weight: bold;
color: #333;
}
.selectors {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.selectors select {
background-color: #fff;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
margin: 0 10px;
cursor: pointer;
}
table {
border-collapse: collapse;
margin: 0 auto;
width: 100%;
max-width: 600px;
table-layout: fixed;
}
td {
border: 1px solid #ccc;
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle;
font-size: 14px;
color: #333;
}
td.today {
background-color: #333;
color: #fff;
}
.today-button {
background-color: #333;
color: #fff;
border: none;
border-radius: 4px;
padding: 10px 20px;
cursor: pointer;
margin-left: 20px;
}
.today-button:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Calendar Component</h1>
<div class="selectors">
<select id="monthSelector" onchange="changeMonth()">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select id="yearSelector" onchange="changeYear()">
</select>
<button class="today-button" onclick="goToToday()">Today</button>
</div>
<div class="navigation">
<button onclick="previousMonth()">Previous Month</button>
<span class="current-month" id="currentMonth"></span>
<button onclick="nextMonth()">Next Month</button>
</div>
<table id="calendar"></table>
</div>
<script>
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var currentMonthIndex = new Date().getMonth();
var currentYear = new Date().getFullYear();
var calendar = document.getElementById("calendar");
var currentMonth = document.getElementById("currentMonth");
var monthSelector = document.getElementById("monthSelector");
var yearSelector = document.getElementById("yearSelector");
currentMonth.innerHTML = months[currentMonthIndex] + " " + currentYear;
function generateCalendar() {
var daysInMonth = new Date(currentYear, currentMonthIndex + 1, 0).getDate();
var firstDayOfMonth = new Date(currentYear, currentMonthIndex, 1).getDay();
var rows = Math.ceil((daysInMonth + firstDayOfMonth) / 7);
var date = 1;
for (var i = 0; i < rows; i++) {
var row = document.createElement("tr");
for (var j = 0; j < 7; j++) {
if (i === 0 && j < firstDayOfMonth) {
var cell = document.createElement("td");
var cellText = document.createTextNode("");
cell.appendChild(cellText);
row.appendChild(cell);
} else if (date > daysInMonth) {
break;
} else {
var cell = document.createElement("td");
var cellText = document.createTextNode(date);
if (date === new Date().getDate() && currentMonthIndex === new Date().getMonth() && currentYear === new Date().getFullYear()) {
cell.classList.add("today");
cell.style.color = "#fff";
}
cell.appendChild(cellText);
row.appendChild(cell);
date++;
}
}
calendar.appendChild(row);
}
}
generateCalendar();
function clearCalendar() {
while (calendar.firstChild) {
calendar.removeChild(calendar.firstChild);
}
}
function previousMonth() {
clearCalendar();
if (currentMonthIndex === 0) {
currentMonthIndex = 11;
currentYear--;
} else {
currentMonthIndex--;
}
currentMonth.innerHTML = months[currentMonthIndex] + " " + currentYear;
monthSelector.value = currentMonthIndex;
yearSelector.value = currentYear;
generateCalendar();
}
function nextMonth() {
clearCalendar();
if (currentMonthIndex === 11) {
currentMonthIndex = 0;
currentYear++;
} else {
currentMonthIndex++;
}
currentMonth.innerHTML = months[currentMonthIndex] + " " + currentYear;
monthSelector.value = currentMonthIndex;
yearSelector.value = currentYear;
generateCalendar();
}
function changeMonth() {
clearCalendar();
currentMonthIndex = parseInt(monthSelector.value);
currentMonth.innerHTML = months[currentMonthIndex] + " " + currentYear;
generateCalendar();
}
function changeYear() {
clearCalendar();
currentYear = parseInt(yearSelector.value);
currentMonth.innerHTML = months[currentMonthIndex] + " " + currentYear;
generateCalendar();
}
function goToToday() {
clearCalendar();
currentMonthIndex = new Date().getMonth();
currentYear = new Date().getFullYear();
currentMonth.innerHTML = months[currentMonthIndex] + " " + currentYear;
monthSelector.value = currentMonthIndex;
yearSelector.value = currentYear;
generateCalendar();
}
// 添加年份选项
var currentYear = new Date().getFullYear();
for (var i = currentYear - 10; i <= currentYear + 10; i++) {
var option = document.createElement("option");
option.value = i;
option.text = i;
yearSelector.appendChild(option);
}
yearSelector.value = currentYear;
</script>
</body>
</html>