当前位置：首页 > JavaScript

js实现日历方法

2026-04-07 16:49:44JavaScript

原生JavaScript实现日历

创建日历需要处理日期计算、月份切换以及界面渲染。以下是一个基础实现方案：

// 获取DOM元素
const calendar = document.getElementById('calendar');
const monthYearDisplay = document.getElementById('month-year');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');

let currentDate = new Date();

// 初始化日历
function initCalendar() {
    updateCalendar();
    prevBtn.addEventListener('click', () => {
        currentDate.setMonth(currentDate.getMonth() - 1);
        updateCalendar();
    });
    nextBtn.addEventListener('click', () => {
        currentDate.setMonth(currentDate.getMonth() + 1);
        updateCalendar();
    });
}

// 更新日历显示
function updateCalendar() {
    monthYearDisplay.textContent = `${currentDate.toLocaleString('default', { month: 'long' })} ${currentDate.getFullYear()}`;

    const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
    const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);

    const daysInMonth = lastDay.getDate();
    const startingDay = firstDay.getDay();

    let html = '';

    // 添加空白单元格
    for (let i = 0; i < startingDay; i++) {
        html += `<div class="day empty"></div>`;
    }

    // 添加日期单元格
    for (let i = 1; i <= daysInMonth; i++) {
        html += `<div class="day">${i}</div>`;
    }

    calendar.innerHTML = html;
}

initCalendar();

使用第三方库实现日历

对于更复杂的日历需求，可以考虑使用成熟的库如FullCalendar：

js实现日历方法

// 安装FullCalendar
// npm install @fullcalendar/core @fullcalendar/daygrid

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');

    const calendar = new Calendar(calendarEl, {
        plugins: [dayGridPlugin],
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,dayGridWeek,dayGridDay'
        }
    });

    calendar.render();
});

日历功能扩展

实现日期选择功能：

// 在updateCalendar函数中添加事件监听
function updateCalendar() {
    // ...之前的代码...

    // 添加日期单元格时添加点击事件
    for (let i = 1; i <= daysInMonth; i++) {
        const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
        html += `<div class="day" data-date="${date.toISOString()}">${i}</div>`;
    }

    calendar.innerHTML = html;

    // 添加日期选择事件
    document.querySelectorAll('.day:not(.empty)').forEach(day => {
        day.addEventListener('click', () => {
            const selectedDate = new Date(day.dataset.date);
            console.log('Selected date:', selectedDate);
        });
    });
}

样式基础示例

#calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    max-width: 600px;
}

.day {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    cursor: pointer;
}

.day.empty {
    background-color: #f5f5f5;
}

.day:hover {
    background-color: #e9e9e9;
}

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