# Proposal: Add Calendar View

**Change ID:** `add-calendar-view`
**Issue Reference:** `FEAT-004` (issues.md)
**Status:** Draft
**Author:** Claude
**Date:** 2026-01-05

## Summary

實作行事曆視角，以月/週/日視圖呈現任務截止日期，方便使用者規劃工作時程。

## Motivation

行事曆視角提供直覺的日期導向任務規劃：
- 快速掌握本週/本月截止的任務
- 識別特定日期的工作量
- 避免任務截止日期過度集中
- 與個人行事曆習慣一致

目前系統需要在列表或看板中逐一檢視任務日期，無法一覽全局。

## Scope

### In Scope
- Frontend: Calendar 元件（月視圖、週視圖、日視圖）
- Frontend: 任務依截止日期顯示在行事曆上
- Frontend: 點擊任務開啟詳情 Modal
- Frontend: 拖拉任務更改截止日期
- Frontend: 篩選器（依指派者、狀態、優先級）

### Out of Scope
- 與外部行事曆（Google Calendar、Outlook）同步
- 重複任務功能
- 行事曆分享

## Design Decisions

### 前端函式庫選擇
建議使用 **FullCalendar**：

| 函式庫 | 優點 | 缺點 |
|--------|------|------|
| FullCalendar | 功能完整、React 支援好、拖拉支援 | 需要 premium 功能要付費 |
| react-big-calendar | 開源、輕量 | 功能較少 |
| @schedule-x/react | 現代設計 | 社群較小 |

**建議**: 使用 FullCalendar（MIT 授權核心功能足夠）

### 視圖模式
| 視圖 | 說明 |
|------|------|
| Month | 月曆格式，每格顯示當日任務（最多 3 個，其餘 "+N more"）|
| Week | 週視圖，每格顯示當日所有任務 |
| Day | 日視圖，當天任務完整列表 |

### 任務顯示規則
- 依 due_date 顯示在對應日期
- 任務卡片顯示：標題、狀態顏色標記、優先級圖示
- 已完成任務可選顯示/隱藏
- 已過期未完成任務特殊標記（紅色邊框）

### 拖拉更新日期
- 拖拉任務至其他日期更新 due_date
- 使用現有 PUT /api/tasks/{id} API
- 樂觀更新，失敗時回滾

### API 使用
```
# 使用現有 API，加入日期範圍篩選
GET /api/projects/{project_id}/tasks?due_after=2026-01-01&due_before=2026-01-31
```

## Affected Specs

| Spec | Change Type |
|------|-------------|
| task-management | MODIFIED (Multiple Views requirement 行事曆細節) |

## Risks & Mitigations

| Risk | Mitigation |
|------|------------|
| 單日任務過多影響顯示 | 月視圖最多顯示 3 個，其餘收合 |
| 效能問題 | 只載入當前視圖月份的任務 |
| 與甘特圖日期衝突 | 行事曆編輯 due_date，甘特圖可編輯 start_date + due_date |

## Dependencies

- FullCalendar（或其他行事曆函式庫）
- 現有 Task API 的 due_date 篩選支援