body { font-family: Arial, sans-serif; text-align: center; } .calendar { display: inline-block; margin-top: 20px; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; } .calendar-header { background-color: #f4f4f4; padding: 10px; display: flex; justify-content: space-between; align-items: center; } .calendar-header button { background-color: #007bff; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; } .calendar-header button:hover { background-color: #0056b3; } .calendar-header h2 { margin: 0; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 10px; } .calendar-grid div { padding: 10px; background-color: #f9f9f9; text-align: center; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } .calendar-grid div.header { font-weight: bold; background-color: #007bff; color: white; } .calendar-grid div.today { background-color: #ffd700; font-weight: bold; }

const calendarGrid = document.getElementById('calendar-grid'); const monthYearLabel = document.getElementById('month-year'); let currentDate = new Date(); function renderCalendar(date) { // 清空当前的日历内容 calendarGrid.innerHTML = ''; // 获取月份和年份 const year = date.getFullYear(); const month = date.getMonth(); // 设置月份和年份标题 const monthNames = [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ]; monthYearLabel.textContent = `${monthNames[month]} ${year}`; // 获取当前月份的第一天和最后一天 const firstDay = new Date(year, month, 1).getDay(); const lastDate = new Date(year, month + 1, 0).getDate(); // 星期标题 const weekDays = ['日', '一', '二', '三', '四', '五', '六']; weekDays.forEach(day => { const div = document.createElement('div'); div.textContent = day; div.className = 'header'; calendarGrid.appendChild(div); }); // 添加空白填充 for (let i = 0; i < firstDay; i++) { const div = document.createElement('div'); calendarGrid.appendChild(div); } // 填充日期 for (let date = 1; date <= lastDate; date++) { const div = document.createElement('div'); div.textContent = date; // 标记今天 const today = new Date(); if ( date === today.getDate() && month === today.getMonth() && year === today.getFullYear() ) { div.className = 'today'; } calendarGrid.appendChild(div); } } function prevMonth() { currentDate.setMonth(currentDate.getMonth() - 1); renderCalendar(currentDate); } function nextMonth() { currentDate.setMonth(currentDate.getMonth() + 1); renderCalendar(currentDate); } // 初始化日历 renderCalendar(currentDate);