js 日历控件

// 创建一个简单的日历控件示例

// 获取页面中的元素
const calendarElement = document.getElementById('calendar');
const prevMonthBtn = document.getElementById('prev-month');
const nextMonthBtn = document.getElementById('next-month');
const monthYearDisplay = document.getElementById('month-year');

let currentDate = new Date();

// 更新日历显示的月份和年份
function updateMonthYear() {
    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    monthYearDisplay.textContent = `${months[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
}

// 生成日历内容
function generateCalendar() {
    const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay();
    const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();

    let calendarHTML = '<table><tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr><tr>';

    // 添加空白单元格以对齐第一个星期几
    for (let i = 0; i < firstDayOfMonth; i++) {
        calendarHTML += '<td></td>';
    }

    // 添加当月的所有日期
    for (let day = 1; day <= daysInMonth; day++) {
        if ((firstDayOfMonth + day - 1) % 7 === 0 && day !== 1) {
            calendarHTML += '</tr><tr>';
        }
        calendarHTML += `<td>${day}</td>`;
    }

    // 关闭表格标签
    calendarHTML += '</tr></table>';

    // 更新日历元素的内容
    calendarElement.innerHTML = calendarHTML;
}

// 切换到上一个月
function prevMonth() {
    currentDate.setMonth(currentDate.getMonth() - 1);
    updateMonthYear();
    generateCalendar();
}

// 切换到下一个月
function nextMonth() {
    currentDate.setMonth(currentDate.getMonth() + 1);
    updateMonthYear();
    generateCalendar();
}

// 初始化日历
updateMonthYear();
generateCalendar();

// 绑定按钮事件
prevMonthBtn.addEventListener('click', prevMonth);
nextMonthBtn.addEventListener('click', nextMonth);

解释说明：

1. HTML 结构：假设你有一个 HTML 页面，包含以下结构：

   <div id="calendar-container">
       <button id="prev-month">Previous Month</button>
       <span id="month-year"></span>
       <button id="next-month">Next Month</button>
       <div id="calendar"></div>
   </div>

2. JavaScript 代码：

   • updateMonthYear() 函数用于更新顶部显示的月份和年份。
   • generateCalendar() 函数生成当前月份的日历，并将其插入到页面中。
   • prevMonth() 和 nextMonth() 函数分别用于切换到上一个月和下一个月。
   • 最后，通过事件监听器将按钮点击与相应的月份切换功能绑定。

这个示例展示了如何使用纯 JavaScript 创建一个简单的日历控件。