js日历插件代码

以下是一个简单的JavaScript日历插件的示例代码：

一、HTML结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calendar</title>
    <style>
        /* 简单的样式来布局日历 */
        #calendar {
            width: 300px;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .calendar - header {
            display: flex;
            justify - content: space - between;
            align - items: center;
            margin - bottom: 10px;
        }

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

        .calendar - day {
            text - align: center;
            padding: 5px;
            border: 1px solid #eee;
        }

        .calendar - date {
            text - align: center;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="calendar">
        <div class="calendar - header">
            <button id="prevMonth">Prev</button>
            <div id="monthYear"></div>
            <button id="nextMonth">Next</button>
        </div>
        <div class="calendar - days" id="calendarDays"></div>
    </div>

    <script src="calendar.js"></script>
</body>

</html>

二、JavaScript代码（calendar.js）

// 获取当前日期
let currentDate = new Date();

// 函数用于获取某个月的天数
function getDaysInMonth(year, month) {
    return new Date(year, month + 1, 0).getDate();
}

// 函数用于获取某个月第一天是星期几
function getFirstDayOfMonth(year, month) {
    return new Date(year, month, 1).getDay();
}

// 函数用于渲染日历
function renderCalendar() {
    const monthYear = document.getElementById('monthYear');
    const calendarDays = document.getElementById('calendarDays');
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();

    // 更新月份和年份显示
    monthYear.textContent = new Date(year, month).toLocaleString('default', {
        month: 'long',
        year: 'numeric'
    });

    const daysInMonth = getDaysInMonth(year, month);
    const firstDay = getFirstDayOfMonth(year, month);

    // 清空之前的日历日期显示
    calendarDays.innerHTML = '';

    // 添加空白单元格以对齐第一天
    for (let i = 0; i < firstDay; i++) {
        const emptyCell = document.createElement('div');
        emptyCell.classList.add('calendar - day');
        calendarDays.appendChild(emptyCell);
    }

    // 添加日期单元格
    for (let i = 1; i <= daysInMonth; i++) {
        const dateCell = document.createElement('div');
        dateCell.classList.add('calendar - date');
        dateCell.textContent = i;
        calendarDays.appendChild(dateCell);
    }
}

// 事件监听器用于切换月份
document.getElementById('prevMonth').addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar();
});

document.getElementById('nextMonth').addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar();
});

// 初始渲染日历
renderCalendar();

三、基础概念

DOM操作
- 在JavaScript中，通过document.getElementById、document.createElement等方法来操作HTML文档对象模型（DOM）。例如，在上述代码中，我们获取了日历容器、按钮和显示月份年份的元素，并且创建了新的日期单元格元素来构建日历的视图。