本帖最后由 dada02 于 2026-1-13 15:03 编辑
html智能网页工作日历备忘录
【写在前面：看到网友写的日历备忘录，总感觉差点什么，恰好其他网友有任务发布类需求，就按现代流行元素设计一款，快速记录工作事务、岁月痕迹】
功能介绍
- 多种配色方案切换
- 支持任务发布，如区间起始日期
- 显示月份可选择1-12个月日历，默认显示2个月
- 每月日历显示进度，任务数量、完成数量、未完成数量，支持一键完成
- 每月日历左右有月份导航，前一月和下一月
- 每天日历点击空白增加或标题修改
- 支持日历快速搜索。
- 支持到期弹窗提醒
- 支持定时导出数据
- 数据存储在浏览器数据库中，容量至少100M以上。
关键代码
// 打开备忘录编辑模态窗口
function openMemoModal(memoId = null, date = null) {
const modal = document.getElementById('memoModal');
const form = document.getElementById('memoForm');
const deleteBtn = document.getElementById('deleteMemo');
const modalTitle = document.querySelector('.modal-title');
selectedMemoId = memoId;
form.reset();
initColorPicker();
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
if (date) {
const dateYear = date.getFullYear();
const dateMonth = String(date.getMonth() + 1).padStart(2, '0');
const dateDay = String(date.getDate()).padStart(2, '0');
document.getElementById('memoDate').value = `${dateYear}-${dateMonth}-${dateDay}`;
} else {
document.getElementById('memoDate').value = `${year}-${month}-${day}`;
}
...
// 一键完成本月所有备忘录
function completeAllMemosForMonth(month, year) {
if (!db) return;
const monthStart = new Date(year, month, 1);
const monthEnd = new Date(year, month + 1, 0);
const monthStartStr = monthStart.toISOString().split('T')[0];
const monthEndStr = monthEnd.toISOString().split('T')[0];
if (!confirm(`确定要将${year}年${month+1}月的所有备忘录标记为已完成吗？`)) {
return;
}
const transaction = db.transaction(['memos'], 'readwrite');
const store = transaction.objectStore('memos');
const dateIndex = store.index('date');
const range = IDBKeyRange.bound(monthStartStr, monthEndStr);
const request = dateIndex.openCursor(range);
let completedCount = 0;
request.onsuccess = function(event) {
const cursor = event.target.result;
if (cursor) {
const memo = cursor.value;
if (!memo.completed) {
memo.completed = true;
memo.updatedAt = new Date().toISOString();
const updateRequest = cursor.update(memo);
updateRequest.onsuccess = function() {
completedCount++;
cursor.continue();
};
} else {
cursor.continue();
}
} else {
alert(`已成功将 ${completedCount} 个备忘录标记为完成！`);
renderMultiMonthCalendar();
updateRecentTasks();
updateStats();
updatePendingBadge();
updateReminderBadge();
if (document.getElementById('dailyDetailModal').classList.contains('active')) {
loadDailyDetailMemos(dailyDetailDate);
}
}
};
...
更新说明
解压到文件夹，双击网页文件浏览器打开，网页操作。
12.21
mp3版增加功能：优化删除为模态窗口显示
每天日历事务增加序号，增加高度，可直接显示6条，并支持滚动
每日备忘录详情增加序号
每日备忘录备忘录列表内容增加markdown显示，支持https超链接新窗口打开
增加备忘录截止时间（选择器清除）提示
优化通知和导出excel日期升序，解压密码：52pojie
12.14
增加提醒设置检查频率：每10秒
12.13
修正UTC时区问题，如2026-1-31备忘录
增加到期提醒自定义mp3播放，如：http://music.163.com/song/media/outer/url?id=1433434738.mp3，或本地mp3文件
12.12
优化通知显示
增加周一到周日顺序版本
增加农历版本
12.11
增加导出Excel
增加备忘录详情和最近任务的日期显示，如：2025/12/11 - 2025/12/26
优化单月显示宽度和居中
12.10
保存配色方案
优化配色方案
蓝奏云
https://wwavl.lanzouu.com/iN0633evwjej 密码:9h6o 修正4个月及以上月份日历显示问题 2025.12.31
https://wwavl.lanzouu.com/iMzcZ3fin2wj 密码:52pj 优化单月日历宽度和增加多月日历标题字数显示 2026.1.7
https://wwavl.lanzouu.com/i7fYk3g0l9ch 密码:52pj 优化数据库版本，解决版本冲突打不开数据库问题
欢迎试用。 | 
[复制链接]
发表于 2025-12-10 18:20
|
发表于 2025-12-12 17:16
