diary-system/docs/CALENDAR.md

日历组件需求说明

位置：frontend/index.html
核心功能 ⭐ - 修改前必须阅读

---

📋 功能列表

ID	功能	描述	代码位置
C-01	月历视图	显示完整月历	renderCalendar()
C-02	星期标题	日一二三四五六	.calendar-day-header
C-03	今天高亮	当前日期特殊样式	.today 类
C-04	日记标记	有日记的日期显示 📝	.has-diary 类
C-05	点击日期	显示当天日记详情	selectDate()
C-06	日记详情	显示完整日记内容	#selected-diary
C-07	上月切换	显示上个月	prevMonth()
C-08	下月切换	显示下个月	nextMonth()
C-09	非当月日期	灰色显示	.other-month 类

---

🎨 UI 结构

<div class="calendar-container">
    <div class="calendar-header">
        <button onclick="prevMonth()">上月</button>
        <h2 id="calendar-title">2026 年 4 月</h2>
        <button onclick="nextMonth()">下月</button>
    </div>
    <div class="calendar-grid" id="calendar-grid">
        <!-- 7 个星期标题 -->
        <div class="calendar-day-header">日</div>
        ...
        <!-- 日期格子 -->
        <div class="calendar-day today has-diary">15</div>
        ...
    </div>
</div>
<div id="selected-diary">点击日期后显示详情</div>

---

🔧 修改指南

可以修改的

• ✅ 样式（颜色、大小、间距）
• ✅ 按钮文字
• ✅ 日期格式
• ✅ 图标样式

不能删除的

• ❌ renderCalendar() 函数
• ❌ selectDate() 函数
• ❌ prevMonth() / nextMonth() 函数
• ❌ .calendar-day 相关样式
• ❌ #calendar-grid 元素
• ❌ #selected-diary 元素

添加新功能时

1. 先查看现有函数
2. 不要删除现有 DOM 元素
3. 可以在现有结构上扩展
4. 修改后运行 test_frontend.py diary

---

🧪 测试清单

修改后必须验证：

• 日历正常显示
• 今天高亮
• 有日记的日期有 📝 标记
• 点击日期显示详情
• 上月/下月切换正常

python3 test_frontend.py diary

---

此文档必须与代码一起维护，修改日历组件时先阅读