# Tasks: Add Calendar View

## Backend Tasks

### 1. Add date range filter to Tasks API
- [x] Modify GET /api/projects/{project_id}/tasks to accept `due_after` and `due_before` query params
- [x] Add filter logic to query
- [x] Add API tests
- **驗證**: 可依日期範圍篩選任務 ✅

## Frontend Tasks

### 2. Install and configure FullCalendar
- [x] Install @fullcalendar/react and related packages
- [x] Install @fullcalendar/daygrid (month view)
- [x] Install @fullcalendar/timegrid (week/day view)
- [x] Install @fullcalendar/interaction (drag & drop)
- **驗證**: 套件安裝成功 ✅

### 3. Create CalendarView component
- [x] Create `frontend/src/components/CalendarView.tsx`
- [x] Configure calendar with month/week/day views
- [x] Style calendar to match application theme
- [x] Add view toggle buttons
- **驗證**: 行事曆正確渲染 ✅

### 4. Load and display tasks on calendar
- [x] Fetch tasks from API with date range
- [x] Transform tasks to FullCalendar event format
- [x] Display task title, status color, priority icon
- [x] Handle overdue tasks (special styling)
- **驗證**: 任務正確顯示在對應日期 ✅

### 5. Implement task click to open detail modal
- [x] Handle event click in calendar
- [x] Open TaskDetailModal with selected task
- [x] Refresh calendar on task update
- **驗證**: 點擊任務開啟詳情 ✅

### 6. Implement drag-to-change date
- [x] Enable drag & drop in FullCalendar
- [x] Handle event drop to get new date
- [x] Call PUT /api/tasks/{id} with new due_date
- [x] Show optimistic update, rollback on error
- **驗證**: 拖拉更新日期可正常運作 ✅

### 7. Add filter controls
- [x] Add assignee filter dropdown
- [x] Add status filter (show/hide completed)
- [x] Add priority filter
- [x] Persist filter in URL or localStorage
- **驗證**: 篩選器正確過濾任務 ✅

### 8. Integrate Calendar view into Tasks page
- [x] Add "Calendar" option to view toggle
- [x] Store view preference in localStorage
- [x] Handle view switching
- **驗證**: 可在 List/Kanban/Gantt/Calendar 之間切換 ✅

## Task Dependencies

```
[1] Date Range Filter API
      ↓
[2] FullCalendar Setup → [3] CalendarView Component
                                    ↓
                          [4] Task Display
                                    ↓
                          [5] Click → Modal
                                    ↓
                          [6] Drag to Change Date
                                    ↓
                          [7] Filters
                                    ↓
                          [8] View Integration
```

- Task 1 (Backend) 可平行於 Tasks 2-3 (Frontend) 開發
- Task 4 需要 Task 1 完成（需要日期範圍 API）
- Tasks 5-8 為循序開發