零依赖每月工作计划备忘录：高效管理你的每一天

📅 零依赖每月工作计划备忘录：高效管理你的每一天

🌈 个人主页：创客白泽 - CSDN博客
🔥 系列专栏：🐍《Python开源项目实战》
💡 热爱不止于代码，热情源自每一个灵感闪现的夜晚。愿以开源之火，点亮前行之路。
🐋 希望大家多多支持，我们一起进步！
👍 🎉如果文章对你有帮助的话，欢迎 点赞 👍🏻 评论 💬 收藏 ⭐️ 加关注+💗分享给更多人哦

在现代快节奏的工作环境中，一个高效的任务管理工具至关重要。本文将介绍一款基于纯前端技术开发的每月工作计划备忘录，支持拖拽排序、Excel导入导出等功能，完全离线使用，保护你的数据隐私。

🌟 概述

每月工作计划备忘录是一款专为个人和团队设计的任务管理工具，它采用纯前端技术实现，无需任何后端支持，真正做到零依赖、轻量级和高性能。通过直观的月度视图和灵活的任务管理功能，帮助用户合理安排时间，提高工作效率。

核心特点：

• 🚀 纯前端实现，零外部依赖
• 📱 响应式设计，支持桌面和移动端
• 💾 本地存储，数据永不丢失
• 📤 支持Excel/CSV导入导出
• 🎯 智能时间管理和优先级设置
• 🖱️ 拖拽操作，直观易用

📋 功能特性

1. 月度视图展示

• 直观的31天网格布局，清晰展示整月安排
• 上午、下午、晚上三个时间段划分
• 今日高亮显示，快速定位当前日期

2. 任务管理

• 添加/编辑/删除任务
• 设置任务优先级（高/中/低）
• 标记任务完成状态
• 任务备注信息

3. 时间设置

• 自定义各时段时间范围
• 灵活显示/隐藏晚上时段
• 移动端时间范围显示控制

4. 数据导入导出

• CSV格式任务导入
• 日报/月报Excel导出
• 数据备份与恢复

5. 个性化设置

• 多主题切换（浅色/深色/护眼绿）
• 自定义表格标题
• 时段显示偏好设置

🎨 展示效果

桌面端效果

设置页面

任务编辑界面

🛠️ 使用步骤说明

1. 基本操作

添加任务：

1. 点击任意日期和时段的单元格
2. 填写任务标题、时间、优先级等信息
3. 可以选择应用到多个日期
4. 点击保存完成任务添加

编辑任务：

1. 点击已存在的任务卡片
2. 修改任务信息
3. 点击保存更新任务

删除任务：

1. 点击任务卡片上的删除按钮(×)
2. 确认删除操作

2. 拖拽功能

• 桌面端：直接拖拽任务到其他单元格
• 移动端：长按任务后拖拽到目标位置

3. 数据导入

1. 点击"CSV导入"按钮
2. 选择或拖拽CSV文件到上传区域
3. 预览导入的任务数据
4. 确认导入操作

4. 数据导出

1. 点击"导出Excel"下拉菜单
2. 选择导出类型（日报/月报/CSV备份）
3. 对于日报，选择具体日期
4. 系统自动生成并下载文件

5. 个性化设置

1. 点击右上角设置按钮(⚙️)
2. 调整主题颜色
3. 配置时段显示选项
4. 设置时间范围
5. 保存设置

🔍 代码解析

核心数据结构

// 任务数据结构
let task = {
    id: generateId(),           // 唯一标识
    title: '任务标题',          // 任务名称
    start: '09:00',            // 开始时间
    end: '10:00',              // 结束时间
    note: '任务备注',          // 备注信息
    priority: 2,               // 优先级(1-3)
    done: false,               // 完成状态
    day: 15,                   // 日期(1-31)
    slot: 'AM',                // 时段(AM/PM/EVENING)
    order: Date.now()          // 排序依据
};

本地存储机制

// 保存数据到本地存储
function saveToLocalStorage(taskData = null) {
    const dataToSave = taskData || tasks;
    localStorage.setItem('weeklyTasks', JSON.stringify(dataToSave));
    if (taskData === null) {
        showToast('已自动保存到本地');
    }
}

// 从本地存储加载数据
function loadFromLocalStorage() {
    const saved = localStorage.getItem('weeklyTasks');
    if (saved) {
        try {
            const parsed = JSON.parse(saved);
            tasks = Array.isArray(parsed) ? parsed : [];
            return tasks;
        } catch (error) {
            console.error('解析本地存储数据失败:', error);
            tasks = [];
            return [];
        }
    }
    tasks = [];
    return [];
}

拖拽功能实现

// 允许放置
function allowDrop(ev) {
    ev.preventDefault();
}

// 处理放置操作
function drop(ev, targetType, targetElement = null) {
    ev.preventDefault();
    
    if (!draggedTask) return;

    const cell = targetElement || ev.target.closest('.task-cell');
    if (cell) {
        // 网格间移动，直接更新位置
        draggedTask.day = parseInt(cell.dataset.day);
        draggedTask.slot = cell.dataset.slot;
    }

    renderTasks();
    saveToLocalStorage();
}

响应式布局设计

/* 桌面端布局 */
.monthly-grid {
    display: grid;
    grid-template-columns: 80px repeat(3, 1fr);
    grid-template-rows: 60px repeat(31, 1fr);
    gap: 1px;
    background-color: var(--border-color);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .monthly-grid {
        grid-template-columns: 60px repeat(3, 1fr);
        grid-template-rows: 50px repeat(31, 1fr);
    }
    
    .task-card {
        font-size: 12px;
        padding: 4px;
    }
}

Excel导出功能

// 导出月报功能
function exportWeeklyReport() {
    const tasks = loadFromLocalStorage() || [];
    const slotNames = { 'AM': '上午', 'PM': '下午', 'EVENING': '晚上' };
    const priorityNames = { 1: '高', 2: '中', 3: '低' };

    // 获取当前月份信息
    const today = new Date();
    const currentMonth = today.getMonth();
    const currentYear = today.getFullYear();
    const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

    // 筛选本月的任务
    const monthTasks = tasks.filter(task => task.day && task.day >= 1 && task.day <= daysInMonth);

    // 创建工作簿和工作表
    const wb = XLSX.utils.book_new();
    const wsData = [
        ['日期', '时段', '任务标题', '开始时间', '结束时间', '优先级', '完成状态', '备注']
    ];

    // 填充数据
    for (let day = 1; day <= daysInMonth; day++) {
        const dayTasks = monthTasks.filter(task => task.day === day)
            .sort((a, b) => {
                const slotOrder = { 'AM': 1, 'PM': 2, 'EVENING': 3 };
                if (a.slot !== b.slot) return (slotOrder[a.slot] || 4) - (slotOrder[b.slot] || 4);
                return (a.start || '').localeCompare(b.start || '');
            });
        
        if (dayTasks.length > 0) {
            dayTasks.forEach(task => {
                wsData.push([
                    `${day}日`,
                    slotNames[task.slot] || task.slot,
                    task.title || '',
                    task.start || '',
                    task.end || '',
                    priorityNames[task.priority] || '中',
                    task.done ? '已完成' : '未完成',
                    task.note || ''
                ]);
            });
        }
    }

    // 生成并导出文件
    const ws = XLSX.utils.aoa_to_sheet(wsData);
    XLSX.utils.book_append_sheet(wb, ws, `${currentMonth+1}月工作月报`);
    
    const fileName = `${currentMonth+1}月工作月报_${currentYear}年${(currentMonth+1).toString().padStart(2,'0')}月${today.getDate().toString().padStart(2,'0')}日.xlsx`;
    XLSX.writeFile(wb, fileName);
    
    showToast(`成功导出${currentMonth+1}月工作月报，共${monthTasks.length}个任务`);
}

📊 系统架构图

📥 源码下载与使用

获取源码

您可以通过以下方式获取完整源码：

------>点击下载 📥 源码下载：本文提供的完整HTML文件可直接下载使用

使用步骤

1. 将HTML文件保存到本地
2. 在浏览器中打开该文件
3. 开始使用每月工作计划备忘录

依赖说明

本项目仅需要两个外部文件：

• xlsx.full.min.js - SheetJS库用于Excel操作
• styles.css - 样式文件（可选，可内联）

自定义开发

如需自定义开发，您可以：

1. 修改样式文件调整界面外观
2. 添加新功能到JavaScript部分
3. 调整时间段的设置和显示方式
4. 扩展导入导出格式支持

🎯 总结

每月工作计划备忘录是一个功能完整、设计优雅的任务管理工具，它具有以下优势：

优点

1. 完全离线：所有数据存储在本地，保护隐私
2. 零依赖：只需浏览器即可运行，无需安装
3. 响应式设计：在桌面和移动设备上均有良好体验
4. 功能丰富：涵盖任务管理的各个方面
5. 数据便携：支持多种格式的导入导出

适用场景

• 个人日常任务规划
• 团队项目进度跟踪
• 学生课程表和时间管理
• 会议安排和预约管理

未来展望

未来可以考虑添加以下功能：

• 云同步支持
• 任务提醒通知
• 多视图切换（周视图、日视图）
• 任务分类和标签系统
• 数据统计和分析功能

立即体验：只需下载一个HTML文件，在浏览器中打开即可开始使用这款强大的每月工作计划备忘录，提升您的效率和组织能力！

📝 温馨提示：建议定期使用导出功能备份您的任务数据，防止浏览器数据丢失造成不便。

版权声明：本文仅用于学习交流，转载请注明出处。如有任何问题，欢迎在评论区留言讨论。