使用 HTML + JavaScript 实现一个日历任务管理系统

在现代快节奏的生活中，有效的时间管理变得越来越重要。本项目是一个基于 HTML 和 JavaScript 开发的日历任务管理系统，旨在为用户提供一个直观、便捷的时间管理工具。系统不仅能够清晰地展示当月日期，还支持事件的添加、编辑和删除操作，并通过本地存储（localStorage）实现数据的保存。

效果演示

项目概述

本项目主要包含以下核心功能：

• 日历展示：动态生成当月日期，并支持月份切换
• 事件管理：支持添加、编辑、删除事件
• 类型区分：支持三种类型事件

页面结构

HTML 部分定义了页面的主要布局，包含日历头部、日历主体、模态框三大部分，其中日历日期将通过JavaScript动态生成。

<div class="calendar-container">
    <div class="calendar-header">
        <h1 id="current-month"></h1>
        <div class="calendar-nav">
            <button id="prev-month">上个月</button>
            <button id="next-month">下个月</button>
            <button id="add-event">添加事件</button>
        </div>
    </div>
    <div class="calendar-grid" id="calendar-grid">
        <div class="calendar-day-header">周日</div>
        <div class="calendar-day-header">周一</div>
        <div class="calendar-day-header">周二</div>
        <div class="calendar-day-header">周三</div>
        <div class="calendar-day-header">周四</div>
        <div class="calendar-day-header">周五</div>
        <div class="calendar-day-header">周六</div>
        <!-- 日历日期将通过JavaScript动态生成 -->
    </div>
</div>
<div id="event-modal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2 id="modal-title">添加新事件</h2>
        <form id="event-form">
            <input type="hidden" id="event-id">
            <input type="hidden" id="event-date">

            <div class="form-group">
                <label for="event-title">标题</label>
                <input type="text" id="event-title" required>
            </div>
            <div class="form-group">
                <label for="event-type">类型</label>
                <select id="event-type">
                    <option value="event">事件</option>
                    <option value="task">任务</option>
                    <option value="important">重要</option>
                </select>
            </div>
            <div class="form-group">
                <label for="event-start">开始时间</label>
                <input type="time" id="event-start">
            </div>
            <div class="form-group">
                <label for="event-end">结束时间</label>
                <input type="time" id="event-end">
            </div>
            <div class="form-group">
                <label for="event-description">描述</label>
                <textarea id="event-description" rows="3"></textarea>
            </div>
            <div class="form-actions">
                <button type="button" id="delete-event" style="display: none; background: #f44336; color: white; border: none;">删除</button>
                <button type="button" id="cancel-event">取消</button>
                <button type="submit" id="save-event" style="background: #4CAF50; color: white; border: none;">保存</button>
            </div>
        </form>
    </div>
</div>

核心功能实现

定义基础数据

获取页面核心 DOM 元素，为后续操作做准备

const calendarGrid = document.getElementById('calendar-grid');
const currentMonthElement = document.getElementById('current-month');
const prevMonthButton = document.getElementById('prev-month');
const nextMonthButton = document.getElementById('next-month');
const addEventButton = document.getElementById('add-event');
const modal = document.getElementById('event-modal');
const closeButton = document.querySelector('.close');
const cancelButton = document.getElementById('cancel-event');
const deleteButton = document.getElementById('delete-event');
const eventForm = document.getElementById('event-form');

初始化当前日期信息

let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();

读取或初始化事件数据

let events = JSON.parse(localStorage.getItem('calendarEvents')) || [];

渲染日历

日历渲染算法流程如下：

1. 计算当月第一天和最后一天的日期对象

2. 确定当月第一天是星期几，用于定位起始位置

3. 填充上个月末尾的日期（灰色显示）

4. 循环生成当月的所有日期单元格

5. 计算是否需要补充下个月初的日期

6. 为今天添加特殊样式

7. 最后调用 renderEvents 方法渲染当月所有事件

function renderCalendar(month, year) {
   
    // 更新当前月份显示
    currentMonthElement.textContent = `${
     year}年${
     month + 1}月`;
    // 清除之前的日历日期
    while (calendarGrid.children.length > 7) {
   
        calendarGrid.removeChild(calendarGrid.lastChild);
    }
    // 获取当月第一天和最后一天
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date