JS实现节假日日历应用开发

原创于 2025-10-27 09:54:15 发布 · 2.9k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript #前端 #1024程序员节 #AI #UI #开发日志

项目概述

在现代生活和工作中，准确识别节假日对于合理安排时间至关重要。本技术博客详细介绍了如何开发一个能够自动识别和标记节假日的日历应用，包括中国法定节假日、调休工作日的完整实现方案。

核心功能特性

完整显示日历，支持月份和年份导航
自动识别并标记法定节假日
特殊标记调休工作日（周末需上班的日期）
区分显示周末和工作日
点击日期查看详细信息
响应式设计，适配不同设备

技术实现方案

1. 节假日数据结构设计

节假日数据是整个应用的核心。我们采用了JSON格式存储不同年份的节假日和调休信息：

// 节假日数据结构示例
const holidaysData = {
    '2024': {
        // 节假日：日期 -> 节日名称
        holidays: {
            '01-01': '元旦',
            '02-10': '春节',
            '02-11': '春节',
            // ...更多节假日
        },
        // 调休工作日：原本是周末但需要上班的日期
        workdays: {
            '02-04': '春节调休',
            '02-18': '春节调休',
            // ...更多调休日
        }
    }
    // ...更多年份数据
};

这种数据结构设计的优势：

高效查询：通过年份和日期字符串作为键，实现O(1)时间复杂度的查询
易于维护：结构清晰，方便添加或修改节假日数据
扩展性好：可以轻松添加更多年份的数据

2. 节假日识别算法

我们实现了四个核心函数来处理节假日的识别：

function isHoliday(year, month, day) {
    const yearData = holidaysData[year];
    if (!yearData) return false;
    
    const dateStr = `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
    return yearData.holidays.hasOwnProperty(dateStr);
}

function isWorkday(year, month, day) {
    const yearData = holidaysData[year];
    if (!yearData) return false;
    
    const dateStr = `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
    return yearData.workdays.hasOwnProperty(dateStr);
}

function getHolidayName(year, month, day) {
    const yearData = holidaysData[year];
    if (!yearData) return '';
    
    const dateStr = `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
    return yearData.holidays[dateStr] || '';
}

function getWorkdayName(year, month, day) {
    const yearData = holidaysData[year];
    if (!yearData) return '';
    
    const dateStr = `${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
    return yearData.workdays[dateStr] || '';
}

3. 日历渲染逻辑

日历渲染是应用的关键部分，需要处理以下几个方面：

3.1 日期计算

计算当月的第一天、最后一天，以及需要显示的上个月和下个月的日期：

// 获取当月第一天
const firstDay = new Date(currentYear, currentMonth, 1);
// 获取当月最后一天
const lastDay = new Date(currentYear, currentMonth + 1, 0);

// 获取当月第一天是星期几（0-6）
const firstDayIndex = firstDay.getDay();
// 获取当月的天数
const daysInMonth = lastDay.getDate();

3.2 日期类型判断与样式应用

对于每个日期，我们需要判断其类型并应用相应的样式：

日期类型优先级规则：

如果是调休工作日，优先标记为调休
如果是节假日，标记为节假日
如果是周末（非调休日），标记为周末
否则，标记为普通工作日

// 检查是否是周末
const dayIndex = i % 7;
if (dayIndex === 0 || dayIndex === 6) {
    // 只有不是调休工作日时才标记为周末
    if (!isWorkday(currentYearNum, currentMonthNum, currentDay)) {
        dayElement.classList.add('weekend');
    }
}

// 检查是否是节假日
if (isHoliday(currentYearNum, currentMonthNum, currentDay)) {
    dayElement.classList.add('holiday');
    const holidayName = getHolidayName(currentYearNum, currentMonthNum, currentDay);
    if (holidayName) {
        const holidayNameElement = document.createElement('div');
        holidayNameElement.classList.add('holiday-name');
        holidayNameElement.textContent = holidayName;
        dayElement.appendChild(holidayNameElement);
    }
}

// 检查是否是调休工作日
if (isWorkday(currentYearNum, currentMonthNum, currentDay)) {
    dayElement.classList.add('workday');
    // ...添加调休名称
}

技术要点与最佳实践

1. 数据管理策略

离线数据优先：将常用年份的节假日数据直接嵌入代码，确保即使在离线环境下也能正常使用
数据验证：在查询数据时进行边界检查，处理不存在的年份数据
格式统一：统一使用"MM-DD"格式的字符串作为日期键，便于比较和查询

2. 用户体验优化

视觉区分：使用不同的背景色和文字颜色直观区分不同类型的日期
交互反馈：添加点击事件显示详细信息，悬停效果提升交互体验
响应式设计：适配不同屏幕尺寸，确保在移动设备上也有良好的显示效果

3. 性能优化

惰性渲染：只在月份或年份变化时重新渲染日历
事件委托：为日期元素添加事件监听器，实现点击交互
DOM操作最小化：使用innerHTML清空容器，避免多次DOM操作

未来扩展方向

1. 动态数据更新

目前的实现使用静态数据，可以扩展为从API动态获取最新的节假日安排：

async function fetchHolidaysData(year) {
    try {
        const response = await fetch(`https://api.example.com/holidays?year=${year}`);
        const data = await response.json();
        // 更新本地数据
        holidaysData[year] = data;
        return data;
    } catch (error) {
        console.error('获取节假日数据失败:', error);
        return holidaysData[year] || { holidays: {}, workdays: {} };
    }
}

2. 多地区支持

扩展支持不同国家和地区的节假日系统：

// 多地区节假日数据结构
const regionalHolidays = {
    'CN': // 中国节假日数据,
    'US': // 美国节假日数据,
    'JP': // 日本节假日数据
};

function isHolidayByRegion(region, year, month, day) {
    const regionData = regionalHolidays[region];
    if (!regionData) return false;
    
    // 检查节假日逻辑
    // ...
}