# 日历组件需求说明

_位置：`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 结构

```html
<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`

---

## 🧪 测试清单

修改后必须验证：
- [ ] 日历正常显示
- [ ] 今天高亮
- [ ] 有日记的日期有 📝 标记
- [ ] 点击日期显示详情
- [ ] 上月/下月切换正常

```bash
python3 test_frontend.py diary
```

---

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