From c160e188e31c02408d97480ac26206c254cf0f7e Mon Sep 17 00:00:00 2001
From: bboysoul <bboysoulcn@gmail.com>
Date: Sun, 20 Sep 2026 12:41:23 +0800
Subject: [PATCH] feat: add calendar frontend

---
 frontend/e2e/backup-roundtrip.spec.ts        |   7 +-
 frontend/e2e/mobile-ui.spec.ts               |  27 ++---
 frontend/e2e/ui-reduction-acceptance.spec.ts |   2 +-
 frontend/src/App.vue                         |  10 +-
 frontend/src/CalendarIntegration.test.ts     |   8 ++
 frontend/src/CalendarPanel.test.ts           | 104 +++++++++++++++++++
 frontend/src/CalendarPanel.vue               |  65 ++++++++++++
 frontend/src/MemoIntegration.test.ts         |   6 +-
 frontend/src/calendar.css                    |   1 +
 frontend/src/lib/mvp-utils.test.ts           |   2 +
 frontend/src/lib/mvp-utils.ts                |   4 +-
 frontend/src/main.ts                         |   1 +
 frontend/src/style.css                       |   2 +-
 frontend/src/style.test.ts                   |  10 +-
 14 files changed, 221 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/CalendarIntegration.test.ts
 create mode 100644 frontend/src/CalendarPanel.test.ts
 create mode 100644 frontend/src/CalendarPanel.vue
 create mode 100644 frontend/src/calendar.css

diff --git a/frontend/e2e/backup-roundtrip.spec.ts b/frontend/e2e/backup-roundtrip.spec.ts
index 517ff42..b6c2509 100644
--- a/frontend/e2e/backup-roundtrip.spec.ts
+++ b/frontend/e2e/backup-roundtrip.spec.ts
@@ -8,6 +8,11 @@ function bottomTab(page: Page, name: string) {
   return page.getByRole('navigation', { name: '主要导航' }).getByRole('button', { name, exact: true })
 }
 
+async function openSidebarView(page: Page, name: string) {
+  await page.getByRole('button', { name: /展开菜单|收起菜单/ }).click()
+  await page.locator('.sidebar').getByRole('button', { name, exact: true }).click()
+}
+
 async function csrf(request: APIRequestContext, baseURL: string) {
   const state = await request.storageState()
   return state.cookies.find(cookie => cookie.name === 'dodo_csrf' && baseURL.includes(cookie.domain))?.value
@@ -50,7 +55,7 @@ test('complete ZIP backup preflights and replace-restores task, habit history, c
   expect(countdownResponse.ok()).toBeTruthy()
 
   await page.goto('/')
-  await bottomTab(page, '设置').click()
+  await openSidebarView(page, '设置')
   const downloadPromise = page.waitForEvent('download')
   await page.getByRole('button', { name: '导出 ZIP' }).click()
   const download = await downloadPromise
diff --git a/frontend/e2e/mobile-ui.spec.ts b/frontend/e2e/mobile-ui.spec.ts
index 9501eab..8f97495 100644
--- a/frontend/e2e/mobile-ui.spec.ts
+++ b/frontend/e2e/mobile-ui.spec.ts
@@ -6,11 +6,6 @@ function bottomTab(page: Page, name: string) {
 }
 
 async function openSettings(page: Page) {
-  const mobileTab = bottomTab(page, '设置')
-  if (await mobileTab.isVisible()) {
-    await mobileTab.click()
-    return
-  }
   const desktopSettings = page.getByRole('navigation', { name: '管理' }).getByRole('button', { name: '设置', exact: true })
   const box = await desktopSettings.boundingBox()
   if (box && box.x + box.width > 0 && box.y + box.height > 0 && box.x < (await page.viewportSize())!.width) await desktopSettings.click()
@@ -159,15 +154,21 @@ test('bottom navigation keeps its safe-area gap after dragging', async ({ page }
 })
 
 test('all bottom destinations expose one active page and desktop layout stays unchanged', async ({ page }) => {
+  await page.route('**/api/v1/calendar-subscriptions', route => route.fulfill({ json: [] }))
+  await page.route('**/api/v1/calendar-events?*', route => route.fulfill({ json: { events: [], sources: [] } }))
   await page.goto('/')
   const navigation = page.getByRole('navigation', { name: '主要导航' })
-  for (const label of ['今天', '习惯', '倒数日', '设置']) {
-    await bottomTab(page, label).click()
-    await expect(navigation.locator('[aria-current="page"]')).toHaveCount(1)
-    await expect(bottomTab(page, label)).toHaveAttribute('aria-current', 'page')
+  const mobile = (await page.viewportSize())!.width <= 930
+  if (mobile) {
+    for (const label of ['今天', '习惯', '倒数日', '备忘录', '日历']) {
+      await bottomTab(page, label).click()
+      await expect(navigation.locator('[aria-current="page"]')).toHaveCount(1)
+      await expect(bottomTab(page, label)).toHaveAttribute('aria-current', 'page')
+    }
+    await bottomTab(page, '今天').click()
+  } else {
+    await expect(navigation).toBeHidden()
   }
-
-  await bottomTab(page, '今天').click()
   await page.setViewportSize({ width: 1440, height: 900 })
   const desktop = await page.locator('.shell').evaluate(element => {
     const shell = getComputedStyle(element)
@@ -202,7 +203,9 @@ test('all bottom destinations expose one active page and desktop layout stays un
 test('settings match the approved paper-ledger geometry and action hierarchy', async ({ page }) => {
   await page.goto('/')
   await openSettings(page)
-  if ((await page.viewportSize())!.width <= 720) await expect(bottomTab(page, '设置')).toHaveAttribute('aria-current', 'page')
+  if ((await page.viewportSize())!.width <= 720) {
+    await expect(page.getByRole('navigation', { name: '主要导航' }).getByRole('button', { name: '设置', exact: true })).toHaveCount(0)
+  }
   const groups = page.locator('.settings-group')
   await expect(groups).toHaveCount(4)
   const layout = await page.locator('.settings-sections').evaluate(element => {
diff --git a/frontend/e2e/ui-reduction-acceptance.spec.ts b/frontend/e2e/ui-reduction-acceptance.spec.ts
index 6a928fd..8ab715a 100644
--- a/frontend/e2e/ui-reduction-acceptance.spec.ts
+++ b/frontend/e2e/ui-reduction-acceptance.spec.ts
@@ -130,7 +130,7 @@ test('task rows use the body for detail and Trash keeps distinct actions', async
 
 test('Settings removes intro/empty danger and places mode-specific restore risk copy correctly', async ({ page }, testInfo) => {
   await page.goto('/')
-  await bottomTab(page, '设置').click()
+  await openSidebarView(page, '设置')
   expect(await page.locator('.view-intro').count()).toBe(0)
   await expect(page.locator('.settings-group')).toHaveCount(4)
   expect(await page.locator('.settings-danger').count()).toBe(0)
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4090fb6..2c3288b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -16,6 +16,7 @@ import { positionArchivedMenu, resolveArchivedMenuFocusTarget } from './lib/arch
 import MvpPanel from './MvpPanel.vue'
 import CountdownPanel from './CountdownPanel.vue'
 import MemoPanel from './MemoPanel.vue'
+import CalendarPanel from './CalendarPanel.vue'
 import FloatingAddButton from './components/FloatingAddButton.vue'
 import CompletedFilterPill from './components/CompletedFilterPill.vue'
 import CalendarPicker from './components/CalendarPicker.vue'
@@ -32,7 +33,7 @@ type TaskList = { id: string; folder_id: string | null; name: string; is_inbox:
 type Task = { id: string; list_id: string; parent_id: string | null; title: string; description: string; priority: number; completed: boolean; completed_at: string | null; version: number; due_at: string | null; due_has_time: boolean; subtasks?: Task[] }
 type RepeatOption = TaskRepeatOption
 type Recurrence = { id: string; task_id: string; rrule: string | null; trigger_mode: 'scheduled' | 'after_completion'; after_completion_days: number | null }
-type View = 'tasks' | 'today' | 'upcoming' | 'trash' | 'habits' | 'countdowns' | 'memos' | 'settings'
+type View = 'tasks' | 'today' | 'upcoming' | 'trash' | 'habits' | 'countdowns' | 'memos' | 'calendar' | 'settings'
 
 const initialized = ref<boolean | null>(null)
 const authReady = ref(false)
@@ -389,6 +390,7 @@ const activeName = computed(() => {
   if (activeView.value === 'habits') return '习惯'
   if (activeView.value === 'countdowns') return '倒数日'
   if (activeView.value === 'memos') return '备忘录'
+  if (activeView.value === 'calendar') return '日历'
   if (activeView.value === 'settings') return '设置与数据'
   return lists.value.find((item) => item.id === activeList.value)?.name || '收集箱'
 })
@@ -409,7 +411,7 @@ const sourceTasks = computed(() => activeView.value === 'trash' ? trash.value :
 const visibleTasks = computed(() => {
   const now = new Date()
   let result = sourceTasks.value
-  if (['habits','settings','countdowns','memos'].includes(activeView.value)) return []
+  if (['habits','settings','countdowns','memos','calendar'].includes(activeView.value)) return []
   if (activeView.value === 'today') result = result.filter((task) => {
     const dueToday = task.due_at && new Date(task.due_at).toDateString() === now.toDateString()
     const completedToday = task.completed_at && new Date(task.completed_at).toDateString() === now.toDateString()
@@ -1613,6 +1615,7 @@ onUnmounted(() => {
         <button :class="{ active: activeView==='habits' }" @click="switchView('habits')"><Repeat2 />习惯</button>
         <button :class="{ active: activeView==='countdowns' }" @click="switchView('countdowns')"><CalendarHeart />倒数日</button>
         <button :class="{ active: activeView==='memos' }" @click="switchView('memos')"><StickyNote />备忘录</button>
+        <button :class="{ active: activeView==='calendar' }" @click="switchView('calendar')"><CalendarDays />日历</button>
       </nav>
       <div class="section-title list-root-drop" :class="{'list-drop-target':listDrag&&listDropFolderId===null&&!listReorderTarget}" @pointermove="listDrag&&resolveListDrop($event)"><span>我的清单</span><span class="sidebar-create-wrap"><button class="mini-icon list-create-trigger" aria-label="新建清单或文件夹" :aria-expanded="sidebarCreateOpen" @click="toggleSidebarCreate"><Plus /></button><span v-if="sidebarCreateOpen" class="sidebar-popover sidebar-create-menu"><button @click="runSidebarCreate('list')"><ListTodo/>新建清单</button><button @click="runSidebarCreate('folder')"><Folder/>新建文件夹</button></span></span></div>
       <div class="folders">
@@ -1684,6 +1687,7 @@ onUnmounted(() => {
         <MvpPanel ref="habitComposer" :key="activeView" :view="activeView as 'habits'|'settings'" :show-completed="showCompleted" :compact-layout="compactLayout" @update:show-completed="showCompleted=$event" @detail="handleHabitDetail" @changed="refreshAll" @notice="toast" @logout="completeLogout" />
       </template>
       <MemoPanel v-else-if="activeView==='memos'" ref="memoPanel" :request="api" @scope="memoTrash=$event==='trash'" @detail="memoDetailOpen=$event" @notice="toast" />
+      <CalendarPanel v-else-if="activeView==='calendar'" @notice="toast" />
       <CountdownPanel ref="countdownComposer" v-else-if="activeView==='countdowns'" @notice="toast" />
       <template v-else>
         <section v-if="activeView==='today'" class="today-context" aria-label="今日概览">
@@ -1765,7 +1769,7 @@ onUnmounted(() => {
       <footer class="detail-actions"><button class="danger-text detail-trash" type="button" :disabled="taskDetailBusy" @click="removeTask(selectedTask)"><Trash2/>移到回收站</button><button class="primary detail-save" type="submit" :disabled="taskDetailBusy">{{savingSelectedTask?'正在保存…':recurrenceLoading?'正在读取…':'保存更改'}}</button></footer>
     </AppSheet>
 
-    <nav class="bottom" :inert="memoBackgroundInert ? true : undefined" aria-label="主要导航"><button :class="{active:activeView==='today'}" :aria-current="activeView==='today' ? 'page' : undefined" @click="switchView('today')"><ListTodo/><span>今天</span></button><button :class="{active:activeView==='habits'}" :aria-current="activeView==='habits' ? 'page' : undefined" @click="switchView('habits')"><Repeat2/><span>习惯</span></button><button :class="{active:activeView==='countdowns'}" :aria-current="activeView==='countdowns' ? 'page' : undefined" @click="switchView('countdowns')"><CalendarHeart/><span>倒数日</span></button><button :class="{active:activeView==='settings'}" :aria-current="activeView==='settings' ? 'page' : undefined" @click="switchView('settings')"><Settings/><span>设置</span></button></nav>
+    <nav class="bottom" :inert="memoBackgroundInert ? true : undefined" aria-label="主要导航"><button :class="{active:activeView==='today'}" :aria-current="activeView==='today' ? 'page' : undefined" @click="switchView('today')"><ListTodo/><span>今天</span></button><button :class="{active:activeView==='habits'}" :aria-current="activeView==='habits' ? 'page' : undefined" @click="switchView('habits')"><Repeat2/><span>习惯</span></button><button :class="{active:activeView==='countdowns'}" :aria-current="activeView==='countdowns' ? 'page' : undefined" @click="switchView('countdowns')"><CalendarHeart/><span>倒数日</span></button><button :class="{active:activeView==='memos'}" :aria-current="activeView==='memos' ? 'page' : undefined" @click="switchView('memos')"><StickyNote/><span>备忘录</span></button><button :class="{active:activeView==='calendar'}" :aria-current="activeView==='calendar' ? 'page' : undefined" @click="switchView('calendar')"><CalendarDays/><span>日历</span></button></nav>
     <FloatingAddButton v-if="['tasks','today','upcoming','habits','countdowns','memos'].includes(activeView)" :show="showFloatingAdd" :label="activeView==='habits' ? '添加习惯' : activeView==='countdowns' ? '添加倒数日' : activeView==='memos' ? '添加备忘录' : '添加任务'" @activate="activateFloatingAdd" />
     <AppSheet :open="taskComposeOpen" variant="create" panel-class="task-compose-sheet" title-id="task-compose-title" initial-focus=".task-compose-input" :style="taskComposeStyle" @close="closeTaskCompose" @submit.prevent="submitTaskCompose">
           <header class="app-sheet__header"><div><h2 id="task-compose-title">{{ taskComposeTitle }}</h2></div><button class="icon" type="button" aria-label="关闭添加任务" @click="closeTaskCompose"><X/></button></header>
diff --git a/frontend/src/CalendarIntegration.test.ts b/frontend/src/CalendarIntegration.test.ts
new file mode 100644
index 0000000..71882bb
--- /dev/null
+++ b/frontend/src/CalendarIntegration.test.ts
@@ -0,0 +1,8 @@
+import { readFileSync } from 'node:fs'
+import { describe,expect,it } from 'vitest'
+const app=readFileSync('src/App.vue','utf8');const utils=readFileSync('src/lib/mvp-utils.ts','utf8');const css=readFileSync('src/calendar.css','utf8')
+describe('calendar shell integration',()=>{
+ it('puts calendar beside the other first-level tools on desktop and mobile',()=>{const nav=app.slice(app.indexOf('<nav class="primary-nav">'),app.indexOf('</nav>',app.indexOf('<nav class="primary-nav">')));expect(nav.indexOf("switchView('habits')")).toBeLessThan(nav.indexOf("switchView('countdowns')"));expect(nav.indexOf("switchView('countdowns')")).toBeLessThan(nav.indexOf("switchView('memos')"));expect(nav.indexOf("switchView('memos')")).toBeLessThan(nav.indexOf("switchView('calendar')"));const bottom=app.slice(app.indexOf('<nav class="bottom"'),app.indexOf('</nav>',app.indexOf('<nav class="bottom"')));for(const view of ['today','habits','countdowns','memos','calendar'])expect(bottom).toContain(`switchView('${view}')`);expect(bottom).not.toContain("switchView('settings')")})
+ it('persists calendar navigation and mounts the panel',()=>{expect(utils).toContain("'calendar'");expect(app).toContain("import CalendarPanel from './CalendarPanel.vue'");expect(app).toContain("activeView==='calendar'")})
+ it('keeps five 44px mobile targets across required breakpoints',()=>{const shellCss=readFileSync('src/style.css','utf8');expect(shellCss).toContain('grid-template-columns:repeat(5,minmax(0,1fr))');expect(css).toContain('min-height:44px');expect(css).toContain('@media(max-width:720px)');expect(css).toContain('@media(min-width:931px)');expect(css).toContain('@media(min-width:1440px)')})
+})
diff --git a/frontend/src/CalendarPanel.test.ts b/frontend/src/CalendarPanel.test.ts
new file mode 100644
index 0000000..07d2822
--- /dev/null
+++ b/frontend/src/CalendarPanel.test.ts
@@ -0,0 +1,104 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick } from 'vue'
+import CalendarPanel from './CalendarPanel.vue'
+
+const cleanups: Array<() => void> = []
+const subscriptions = [{ id:'s1', name:'工作', url:'https://example.com/work.ics', color:'#f15a29', enabled:true, refreshed_at:'2026-09-20T08:00:00Z', last_error:null, stale:false }]
+const events = [{ id:'e1', title:'发布会', starts_at:'2026-09-22T02:00:00Z', ends_at:'2026-09-22T03:00:00Z', all_day:false, description:'产品发布', location:'会议室', source_name:'工作', color:'#f15a29' }]
+const json = (value:unknown, status=200) => new Response(JSON.stringify(value), { status, headers:{'content-type':'application/json'} })
+async function flush(){ await Promise.resolve(); await new Promise(r=>setTimeout(r,0)); await nextTick() }
+async function mount(fetchMock:ReturnType<typeof vi.fn>){ vi.stubGlobal('fetch',fetchMock); const host=document.createElement('div');document.body.append(host);const notices:string[]=[];const app=createApp(()=>h(CalendarPanel,{onNotice:(v:string)=>notices.push(v)}));app.mount(host);cleanups.push(()=>{app.unmount();host.remove()});await flush();return {host,notices} }
+afterEach(()=>{cleanups.splice(0).forEach(fn=>fn());vi.unstubAllGlobals();vi.restoreAllMocks()})
+
+describe('CalendarPanel',()=>{
+ it('loads subscriptions and the visible month then filters and opens event detail',async()=>{
+  const fetchMock=vi.fn((url:string)=>url.includes('calendar-events')?Promise.resolve(json({events,sources:[{id:'s1',name:'工作',stale:false}]})):Promise.resolve(json(subscriptions)))
+  const {host}=await mount(fetchMock)
+  const eventsUrl=String(fetchMock.mock.calls.find(([url])=>String(url).includes('calendar-events'))?.[0])
+  const params=new URL(eventsUrl,'http://localhost').searchParams
+  expect(params.get('start')).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/)
+  expect(params.get('end')).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/)
+  expect(host.textContent).toContain('发布会');expect(host.textContent).toContain('工作')
+  host.querySelector<HTMLButtonElement>('[data-event-id="e1"]')!.click();await nextTick()
+  expect(document.querySelector('.calendar-event-detail')?.textContent).toContain('产品发布')
+  host.querySelector<HTMLInputElement>('input[aria-label="筛选工作"]')!.click();await nextTick()
+  expect(host.querySelector('[data-event-id="e1"]')).toBeNull()
+ })
+ it('groups UTC events by the browser-local calendar day',async()=>{
+  const boundary=[{...events[0],id:'boundary',starts_at:'2026-09-21T23:30:00Z',ends_at:'2026-09-22T00:30:00Z'}]
+  const fetchMock=vi.fn((url:string)=>Promise.resolve(json(url.includes('calendar-events')?{events:boundary,sources:[]}:subscriptions)))
+  const {host}=await mount(fetchMock)
+  const expected=new Intl.DateTimeFormat('zh-CN',{month:'long',day:'numeric',weekday:'short'}).format(new Date(boundary[0].starts_at))
+  expect(host.querySelector('.calendar-agenda h2')?.textContent).toBe(expected)
+ })
+ it('keeps the newest month response when requests finish out of order',async()=>{
+  const pending:Array<{url:string;resolve:(response:Response)=>void}>=[]
+  const fetchMock=vi.fn((url:string)=>String(url).includes('calendar-events')?new Promise<Response>(resolve=>pending.push({url:String(url),resolve})):Promise.resolve(json(subscriptions)))
+  const {host}=await mount(fetchMock)
+  expect(pending).toHaveLength(1)
+  host.querySelector<HTMLButtonElement>('[aria-label="下个月"]')!.click();await nextTick()
+  expect(pending).toHaveLength(2)
+  pending[1].resolve(json({events:[{...events[0],id:'new',title:'新月份'}],sources:[]}));await flush()
+  pending[0].resolve(json({events:[{...events[0],id:'old',title:'旧月份'}],sources:[]}));await flush()
+  expect(host.textContent).toContain('新月份')
+  expect(host.textContent).not.toContain('旧月份')
+ })
+ it('supports month navigation and today',async()=>{
+  const fetchMock=vi.fn((url:string)=>Promise.resolve(json(url.includes('calendar-events')?{events:[],sources:[]}:subscriptions)))
+  const {host}=await mount(fetchMock);const before=fetchMock.mock.calls.length
+  host.querySelector<HTMLButtonElement>('[aria-label="下个月"]')!.click();await flush()
+  host.querySelector<HTMLButtonElement>('[aria-label="回到今天"]')!.click();await flush()
+  expect(fetchMock.mock.calls.length).toBeGreaterThanOrEqual(before+2)
+ })
+ it('closes the subscription form without submitting it',async()=>{
+  const fetchMock=vi.fn((url:string)=>Promise.resolve(json(url.includes('calendar-events')?{events:[],sources:[]}:subscriptions)))
+  const {host}=await mount(fetchMock)
+  host.querySelector<HTMLButtonElement>('[aria-label="管理日历源"]')!.click();await nextTick()
+  document.querySelector<HTMLButtonElement>('[aria-label="添加日历订阅"]')!.click();await nextTick()
+  const name=document.querySelector<HTMLInputElement>('input[aria-label="订阅名称"]')!,url=document.querySelector<HTMLInputElement>('input[aria-label="订阅地址"]')!
+  name.value='私人';name.dispatchEvent(new Event('input'));url.value='https://example.com/a.ics';url.dispatchEvent(new Event('input'));await nextTick()
+  document.querySelector<HTMLButtonElement>('[aria-label="关闭订阅表单"]')!.click();await flush()
+  const calls=fetchMock.mock.calls as unknown as Array<[string,RequestInit?]>
+  expect(calls.some(([,options])=>options?.method==='POST')).toBe(false)
+ })
+ it('creates, edits, toggles, refreshes and deletes a source with confirmation',async()=>{
+  const calls:Array<[string,RequestInit|undefined]>=[]
+  const fetchMock=vi.fn((url:string,options?:RequestInit)=>{calls.push([url,options]);if(options?.method==='DELETE')return Promise.resolve(new Response(null,{status:204}));if(options?.method)return Promise.resolve(json(subscriptions[0]));return Promise.resolve(json(url.includes('calendar-events')?{events,sources:[{id:'s1',name:'工作',stale:false}]}:subscriptions))})
+  const {host}=await mount(fetchMock)
+  host.querySelector<HTMLButtonElement>('[aria-label="管理日历源"]')!.click();await nextTick()
+  document.querySelector<HTMLButtonElement>('[aria-label="添加日历订阅"]')!.click();await nextTick()
+  const name=document.querySelector<HTMLInputElement>('input[aria-label="订阅名称"]')!,url=document.querySelector<HTMLInputElement>('input[aria-label="订阅地址"]')!;name.value='私人';name.dispatchEvent(new Event('input'));url.value='https://example.com/a.ics';url.dispatchEvent(new Event('input'));await nextTick();document.querySelector<HTMLButtonElement>('.calendar-subscription-form button[type="submit"]')!.click();await flush()
+  expect(calls.some(([u,o])=>u.endsWith('/calendar-subscriptions')&&o?.method==='POST')).toBe(true)
+  host.querySelector<HTMLButtonElement>('[aria-label="管理日历源"]')!.click();await nextTick()
+  document.querySelector<HTMLButtonElement>('[aria-label="编辑工作"]')!.click();await nextTick()
+  const editedName=document.querySelector<HTMLInputElement>('input[aria-label="订阅名称"]')!;editedName.value='工作日历';editedName.dispatchEvent(new Event('input'));await nextTick();document.querySelector<HTMLButtonElement>('.calendar-subscription-form button[type="submit"]')!.click();await flush()
+  expect(calls.some(([u,o])=>u.endsWith('/calendar-subscriptions/s1')&&o?.method==='PATCH'&&String(o.body).includes('工作日历'))).toBe(true)
+  host.querySelector<HTMLButtonElement>('[aria-label="管理日历源"]')!.click();await nextTick()
+  document.querySelector<HTMLButtonElement>('[aria-label="刷新工作"]')!.click();await flush()
+  expect(calls.some(([u,o])=>u.endsWith('/calendar-subscriptions/s1/refresh')&&o?.method==='POST')).toBe(true)
+  document.querySelector<HTMLInputElement>('[aria-label="启用工作"]')!.click();await flush()
+  expect(calls.some(([u,o])=>u.endsWith('/calendar-subscriptions/s1')&&o?.method==='PATCH')).toBe(true)
+  document.querySelector<HTMLButtonElement>('[aria-label="删除工作"]')!.click();await nextTick()
+  document.querySelector<HTMLButtonElement>('.app-dialog .danger-button')!.click();await flush()
+  expect(calls.some(([u,o])=>u.endsWith('/calendar-subscriptions/s1')&&o?.method==='DELETE')).toBe(true)
+ })
+ it('clears an earlier action error after a successful retry',async()=>{
+  let failRefresh=true
+  const fetchMock=vi.fn((url:string,options?:RequestInit)=>{
+   if(options?.method==='POST'&&String(url).endsWith('/refresh')&&failRefresh){failRefresh=false;return Promise.resolve(json({detail:'上游不可用'},502))}
+   if(options?.method)return Promise.resolve(json(subscriptions[0]))
+   return Promise.resolve(json(String(url).includes('calendar-events')?{events:[],sources:[]}:subscriptions))
+  })
+  const {host}=await mount(fetchMock);host.querySelector<HTMLButtonElement>('[aria-label="管理日历源"]')!.click();await nextTick()
+  document.querySelector<HTMLButtonElement>('[aria-label="刷新工作"]')!.click();await flush()
+  expect(host.querySelector('.inline-error')?.textContent).toContain('上游不可用')
+  document.querySelector<HTMLButtonElement>('[aria-label="刷新工作"]')!.click();await flush()
+  expect(host.querySelector('.inline-error')).toBeNull()
+ })
+ it('shows source-specific refresh errors',async()=>{
+  const failed=[{...subscriptions[0],last_error:'订阅地址无法访问'}]
+  const fetchMock=vi.fn((url:string)=>Promise.resolve(json(url.includes('calendar-events')?{events:[],sources:[]}:failed)))
+  const {host}=await mount(fetchMock);host.querySelector<HTMLButtonElement>('[aria-label="管理日历源"]')!.click();await nextTick()
+  expect(document.querySelector('[role="alert"]')?.textContent).toContain('订阅地址无法访问')
+ })
+})
diff --git a/frontend/src/CalendarPanel.vue b/frontend/src/CalendarPanel.vue
new file mode 100644
index 0000000..6415dc5
--- /dev/null
+++ b/frontend/src/CalendarPanel.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { CalendarDays, ChevronLeft, ChevronRight, Pencil, Plus, RefreshCw, Settings2, Trash2, X } from 'lucide-vue-next'
+import { csrfHeader } from './lib/csrf'
+import { formatApiErrorDetail } from './lib/mvp-utils'
+import AppSheet from './components/AppSheet.vue'
+import AppDialog, { type AppDialogOptions } from './components/AppDialog.vue'
+
+type Subscription = { id:string; name:string; url:string; color:string; enabled:boolean; refreshed_at:string|null; last_error:string|null; stale:boolean }
+type CalendarEvent = { id:string; title:string; starts_at:string; ends_at:string; all_day:boolean; source_name:string; color:string; description?:string|null; location?:string|null }
+type EventResponse = { events:CalendarEvent[]; sources:Array<{id:string;name:string;stale:boolean}> }
+type Form = { name:string; url:string; color:string; enabled:boolean }
+const emit=defineEmits<{notice:[message:string]}>()
+const subscriptions=ref<Subscription[]>([]),events=ref<CalendarEvent[]>([]),loading=ref(false),error=ref('')
+let eventsRequestGeneration=0
+const month=ref(new Date(new Date().getFullYear(),new Date().getMonth(),1)),hiddenSources=ref(new Set<string>())
+const selected=ref<CalendarEvent|null>(null),manageOpen=ref(false),formOpen=ref(false),editing=ref<Subscription|null>(null),busyId=ref('')
+const form=ref<Form>({name:'',url:'',color:'#f15a29',enabled:true})
+const appDialog=ref<{show:(options:AppDialogOptions)=>Promise<boolean|string|null>}|null>(null)
+const request=async(path:string,options:RequestInit={})=>{const headers:Record<string,string>={...(options.headers as Record<string,string>||{})};if(options.body)headers['Content-Type']='application/json';Object.assign(headers,csrfHeader(options.method));const response=await fetch('/api/v1'+path,{credentials:'include',...options,headers});if(!response.ok){const body=await response.json().catch(()=>({}));throw new Error(formatApiErrorDetail((body as {detail?:unknown}).detail??body))}return response.status===204?null:response.json()}
+const key=(date:Date)=>`${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`
+const range=computed(()=>{const start=new Date(month.value.getFullYear(),month.value.getMonth(),1);const end=new Date(month.value.getFullYear(),month.value.getMonth()+1,1);return{start:start.toISOString(),end:end.toISOString()}})
+const monthLabel=computed(()=>new Intl.DateTimeFormat('zh-CN',{year:'numeric',month:'long'}).format(month.value))
+const eventStart=(event:CalendarEvent)=>event.starts_at
+const eventEnd=(event:CalendarEvent)=>event.ends_at
+const eventKey=(event:CalendarEvent)=>event.id
+const sourceId=(event:CalendarEvent)=>subscriptions.value.find(item=>item.name===event.source_name)?.id??''
+const visibleEvents=computed(()=>events.value.filter(event=>!hiddenSources.value.has(sourceId(event))).sort((a,b)=>eventStart(a).localeCompare(eventStart(b))))
+const localDayKey=(value:string)=>{const date=new Date(value);return Number.isNaN(date.getTime())?value.slice(0,10):key(date)}
+const groupedEvents=computed(()=>{const groups=new Map<string,CalendarEvent[]>();for(const event of visibleEvents.value){const day=localDayKey(eventStart(event));groups.set(day,[...(groups.get(day)??[]),event])}return [...groups].map(([day,items])=>({day,items}))})
+const eventTitle=(event:CalendarEvent)=>event.title||'未命名事件'
+const eventSource=(event:CalendarEvent)=>event.source_name||'日历'
+const eventColor=(event:CalendarEvent)=>event.color||'#f15a29'
+function displayDay(day:string){const [y,m,d]=day.split('-').map(Number);return new Intl.DateTimeFormat('zh-CN',{month:'long',day:'numeric',weekday:'short'}).format(new Date(y,m-1,d))}
+function displayTime(event:CalendarEvent){if(event.all_day)return'全天';const date=new Date(eventStart(event));return Number.isNaN(date.getTime())?'时间待定':new Intl.DateTimeFormat('zh-CN',{hour:'2-digit',minute:'2-digit'}).format(date)}
+async function loadSubscriptions(){subscriptions.value=await request('/calendar-subscriptions') as Subscription[]}
+async function loadEvents(){const generation=++eventsRequestGeneration;const requestedRange=range.value;const data=await request(`/calendar-events?start=${encodeURIComponent(requestedRange.start)}&end=${encodeURIComponent(requestedRange.end)}`) as EventResponse;if(generation===eventsRequestGeneration)events.value=data.events}
+async function load(){loading.value=true;error.value='';try{await Promise.all([loadSubscriptions(),loadEvents()])}catch(reason){error.value=reason instanceof Error?reason.message:'日历载入失败'}finally{loading.value=false}}
+async function moveMonth(offset:number){month.value=new Date(month.value.getFullYear(),month.value.getMonth()+offset,1);await loadEvents().catch(reason=>error.value=reason instanceof Error?reason.message:'事件载入失败')}
+async function today(){const now=new Date();month.value=new Date(now.getFullYear(),now.getMonth(),1);await loadEvents().catch(reason=>error.value=reason instanceof Error?reason.message:'事件载入失败')}
+function toggleFilter(id:string){const next=new Set(hiddenSources.value);next.has(id)?next.delete(id):next.add(id);hiddenSources.value=next}
+function openCreate(){editing.value=null;form.value={name:'',url:'',color:'#f15a29',enabled:true};formOpen.value=true}
+function openEdit(item:Subscription){editing.value=item;form.value={name:item.name,url:item.url,color:item.color||'#f15a29',enabled:item.enabled};formOpen.value=true}
+async function save(){if(busyId.value||!form.value.name.trim()||!form.value.url.trim())return;busyId.value='form';error.value='';try{await request(editing.value?`/calendar-subscriptions/${editing.value.id}`:'/calendar-subscriptions',{method:editing.value?'PATCH':'POST',body:JSON.stringify({...form.value,name:form.value.name.trim(),url:form.value.url.trim()})});formOpen.value=false;await Promise.all([loadSubscriptions(),loadEvents()]);emit('notice',editing.value?'日历订阅已更新':'日历订阅已添加')}catch(reason){error.value=reason instanceof Error?reason.message:'保存失败'}finally{busyId.value=''}}
+async function toggleEnabled(item:Subscription){if(busyId.value)return;busyId.value=item.id;error.value='';try{await request(`/calendar-subscriptions/${item.id}`,{method:'PATCH',body:JSON.stringify({enabled:!item.enabled})});await Promise.all([loadSubscriptions(),loadEvents()]);emit('notice',item.enabled?'日历订阅已停用':'日历订阅已启用')}catch(reason){error.value=reason instanceof Error?reason.message:'更新失败'}finally{busyId.value=''}}
+async function refresh(item:Subscription){if(busyId.value)return;busyId.value=item.id;error.value='';try{await request(`/calendar-subscriptions/${item.id}/refresh`,{method:'POST'});await Promise.all([loadSubscriptions(),loadEvents()]);emit('notice',`${item.name}已刷新`)}catch(reason){error.value=reason instanceof Error?reason.message:'刷新失败'}finally{busyId.value=''}}
+async function remove(item:Subscription){if(busyId.value)return;if(await appDialog.value?.show({title:`删除“${item.name}”？`,description:'该来源的事件也会从日历中移除。',danger:true,confirmText:'删除'})!==true)return;busyId.value=item.id;error.value='';try{await request(`/calendar-subscriptions/${item.id}`,{method:'DELETE'});hiddenSources.value.delete(item.id);await Promise.all([loadSubscriptions(),loadEvents()]);emit('notice','日历订阅已删除')}catch(reason){error.value=reason instanceof Error?reason.message:'删除失败'}finally{busyId.value=''}}
+watch(manageOpen,open=>{if(!open)formOpen.value=false})
+onMounted(()=>void load())
+</script>
+
+<template>
+<section class="calendar-view" :class="{loading}">
+ <header class="calendar-heading"><div><h1>日历</h1><p>{{visibleEvents.length}} 个日程 · {{subscriptions.length}} 个来源</p></div><button class="soft-button calendar-manage" aria-label="管理日历源" @click="manageOpen=true"><Settings2/>日历源</button></header>
+ <p v-if="error" class="inline-error" role="alert">{{error}}</p>
+ <div class="calendar-toolbar"><button aria-label="上个月" @click="moveMonth(-1)"><ChevronLeft/></button><button class="calendar-today" aria-label="回到今天" @click="today">今天</button><strong>{{monthLabel}}</strong><button aria-label="下个月" @click="moveMonth(1)"><ChevronRight/></button></div>
+ <div v-if="subscriptions.length" class="calendar-filters" aria-label="筛选日历源"><label v-for="source in subscriptions" :key="source.id"><input type="checkbox" :aria-label="`筛选${source.name}`" :checked="!hiddenSources.has(source.id)" @change="toggleFilter(source.id)"><i :style="{background:source.color}"/>{{source.name}}</label></div>
+ <div v-if="groupedEvents.length" class="calendar-agenda"><section v-for="group in groupedEvents" :key="group.day"><h2>{{displayDay(group.day)}}</h2><button v-for="event in group.items" :key="eventKey(event)" :data-event-id="event.id" class="calendar-event-row" @click="selected=event"><i :style="{background:eventColor(event)}"/><time>{{displayTime(event)}}</time><span><b>{{eventTitle(event)}}</b><small>{{eventSource(event)}}<template v-if="event.location"> · {{event.location}}</template></small></span><ChevronRight/></button></section></div>
+ <div v-else-if="!loading" class="calendar-empty"><CalendarDays/><b>这个月还没有日程</b><span>{{subscriptions.length?'可以切换月份或检查来源筛选':'先添加一个 iCal 日历订阅'}}</span><button v-if="!subscriptions.length" class="primary-small" @click="manageOpen=true;openCreate()">添加日历源</button></div>
+ <AppSheet :open="Boolean(selected)" variant="detail" panel-class="calendar-event-detail" title-id="calendar-event-title" initial-focus="button[aria-label='关闭日程详情']" @close="selected=null"><template v-if="selected"><header class="app-sheet__header"><h3 id="calendar-event-title">{{eventTitle(selected)}}</h3><button aria-label="关闭日程详情" @click="selected=null"><X/></button></header><div class="app-sheet__body"><dl><div><dt>时间</dt><dd>{{displayDay(localDayKey(eventStart(selected)))}} {{displayTime(selected)}}<template v-if="eventEnd(selected) && !selected.all_day"> – {{displayTime({...selected,starts_at:eventEnd(selected)})}}</template></dd></div><div><dt>来源</dt><dd><i :style="{background:eventColor(selected)}"/>{{eventSource(selected)}}</dd></div><div v-if="selected.location"><dt>地点</dt><dd>{{selected.location}}</dd></div></dl><section v-if="selected.description"><h4>备注</h4><p>{{selected.description}}</p></section></div></template></AppSheet>
+ <AppSheet :open="manageOpen" variant="detail" panel-class="calendar-sources-sheet" title-id="calendar-sources-title" initial-focus="button[aria-label='关闭日历源']" @close="manageOpen=false"><header class="app-sheet__header"><h3 id="calendar-sources-title">日历源</h3><button aria-label="关闭日历源" @click="manageOpen=false"><X/></button></header><div class="app-sheet__body"><button class="primary-small calendar-source-add" aria-label="添加日历订阅" @click="openCreate"><Plus/>添加订阅</button><div class="calendar-source-list"><article v-for="source in subscriptions" :key="source.id"><div class="calendar-source-copy"><b><i :style="{background:source.color}"/>{{source.name}}</b><small>{{source.url}}</small><small v-if="source.last_error" class="calendar-source-error" role="alert">{{source.last_error}}</small></div><label class="calendar-source-toggle"><input type="checkbox" :aria-label="`启用${source.name}`" :checked="source.enabled" :disabled="Boolean(busyId)" @change="toggleEnabled(source)"><span>启用</span></label><button :aria-label="`刷新${source.name}`" :disabled="Boolean(busyId)" @click="refresh(source)"><RefreshCw/></button><button :aria-label="`编辑${source.name}`" :disabled="Boolean(busyId)" @click="openEdit(source)"><Pencil/></button><button class="danger-text" :aria-label="`删除${source.name}`" :disabled="Boolean(busyId)" @click="remove(source)"><Trash2/></button></article></div></div></AppSheet>
+ <AppSheet :open="formOpen" variant="create" panel-class="calendar-subscription-form" title-id="calendar-form-title" initial-focus="input[aria-label='订阅名称']" :busy="busyId==='form'" @close="formOpen=false" @submit.prevent="save"><header class="app-sheet__header"><h3 id="calendar-form-title">{{editing?'编辑订阅':'添加订阅'}}</h3><button type="button" aria-label="关闭订阅表单" @click="formOpen=false"><X/></button></header><div class="app-sheet__body"><label>名称<input v-model="form.name" aria-label="订阅名称" maxlength="120" required placeholder="例如：工作"></label><label>iCal 地址<input v-model="form.url" aria-label="订阅地址" type="url" required placeholder="https://example.com/calendar.ics"></label><label>颜色<input v-model="form.color" aria-label="订阅颜色" type="color"></label><label class="calendar-form-toggle"><input v-model="form.enabled" type="checkbox">启用此订阅</label></div><footer class="app-sheet__footer"><button type="button" class="secondary" @click="formOpen=false">取消</button><button type="submit" class="primary-small" :disabled="Boolean(busyId)||!form.name.trim()||!form.url.trim()">保存</button></footer></AppSheet>
+ <AppDialog ref="appDialog"/>
+</section>
+</template>
diff --git a/frontend/src/MemoIntegration.test.ts b/frontend/src/MemoIntegration.test.ts
index 7a2618a..e27284b 100644
--- a/frontend/src/MemoIntegration.test.ts
+++ b/frontend/src/MemoIntegration.test.ts
@@ -7,13 +7,13 @@ const panel = readFileSync('src/MemoPanel.vue', 'utf8')
 const editor = readFileSync('src/components/MemoEditor.vue', 'utf8')
 
 describe('memo shell integration', () => {
-  it('places Memos immediately after Countdowns in desktop navigation and keeps mobile tabs unchanged', () => {
+  it('places Memos immediately after Countdowns in desktop navigation and exposes it as a direct mobile destination', () => {
     const nav = app.slice(app.indexOf('<nav class="primary-nav">'), app.indexOf('</nav>', app.indexOf('<nav class="primary-nav">')))
     expect(nav.indexOf("switchView('memos')")).toBeGreaterThan(nav.indexOf("switchView('countdowns')"))
     expect(nav.match(/switchView\('memos'\)/g)).toHaveLength(1)
     const bottom = app.slice(app.indexOf('<nav class="bottom"'), app.indexOf('</nav>', app.indexOf('<nav class="bottom"')))
-    expect(bottom).not.toContain("switchView('memos')")
-    expect(bottom.match(/aria-current=/g)).toHaveLength(4)
+    expect(bottom).toContain("switchView('memos')")
+    expect(bottom.match(/aria-current=/g)).toHaveLength(5)
   })
 
   it('routes the shared cat FAB to a local memo draft, hides it in trash, and defers POST until save', () => {
diff --git a/frontend/src/calendar.css b/frontend/src/calendar.css
new file mode 100644
index 0000000..c43b31a
--- /dev/null
+++ b/frontend/src/calendar.css
@@ -0,0 +1 @@
+.calendar-view{width:min(100%,900px);margin:0 auto;padding-bottom:42px;display:grid;gap:16px}.calendar-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.calendar-heading h1{margin:0;font-size:34px;line-height:1.15;letter-spacing:-.035em}.calendar-heading p{margin:8px 0 0;color:var(--muted);font-size:13px}.calendar-manage{min-height:44px}.calendar-toolbar{min-height:48px;display:grid;grid-template-columns:44px 64px minmax(0,1fr) 44px;align-items:center;border-block:1px solid #e8e0d5}.calendar-toolbar button{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:10px}.calendar-toolbar .calendar-today{width:64px}.calendar-toolbar strong{text-align:center;font-size:16px}.calendar-filters{display:flex;gap:8px;overflow:auto;padding-bottom:2px}.calendar-filters label{min-height:44px;display:flex;align-items:center;gap:7px;padding:0 12px;border:1px solid var(--border-cream);border-radius:999px;background:var(--surface-raised);font-size:12px;white-space:nowrap}.calendar-filters input{position:absolute;opacity:0;pointer-events:none}.calendar-filters label:has(input:not(:checked)){opacity:.48}.calendar-filters i,.calendar-event-row>i,.calendar-event-detail dd i,.calendar-source-copy i{width:9px;height:9px;display:inline-block;flex:0 0 auto;border-radius:50%}.calendar-agenda{display:grid;gap:20px}.calendar-agenda section{display:grid}.calendar-agenda h2{min-height:40px;margin:0;display:flex;align-items:center;border-bottom:1px solid #e8e0d5;font-size:13px}.calendar-event-row{min-height:62px;display:grid;grid-template-columns:10px 54px minmax(0,1fr) 24px;align-items:center;gap:10px;padding:0 4px;border:0;border-bottom:1px solid #e8e0d5;background:transparent;text-align:left}.calendar-event-row:hover{background:#fff8ee}.calendar-event-row time{color:var(--muted);font-size:12px}.calendar-event-row span{min-width:0;display:grid;gap:4px}.calendar-event-row b,.calendar-event-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-event-row b{font-size:14px;font-weight:620}.calendar-event-row small{color:var(--muted);font-size:11px}.calendar-event-row>svg{color:#aa9f92}.calendar-empty{min-height:260px;display:grid;place-items:center;align-content:center;gap:9px;color:var(--muted);text-align:center}.calendar-empty svg{width:32px;height:32px}.calendar-empty b{color:var(--text-primary)}.calendar-event-detail,.calendar-sources-sheet{width:min(520px,100%);max-height:min(88dvh,760px)}.calendar-event-detail dl{margin:0}.calendar-event-detail dl>div{min-height:52px;display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;border-bottom:1px solid #e8e0d5}.calendar-event-detail dt{color:var(--muted);font-size:11px}.calendar-event-detail dd{margin:0;display:flex;align-items:center;gap:7px;font-size:13px}.calendar-event-detail h4{margin:2px 0 8px;font-size:13px}.calendar-event-detail p{margin:0;white-space:pre-wrap;line-height:1.6;font-size:13px}.calendar-source-add{justify-self:start}.calendar-source-list{display:grid}.calendar-source-list article{min-height:72px;display:grid;grid-template-columns:minmax(0,1fr) auto 44px 44px 44px;align-items:center;gap:4px;border-bottom:1px solid #e8e0d5}.calendar-source-copy{min-width:0;display:grid;gap:3px}.calendar-source-copy b{display:flex;align-items:center;gap:7px;font-size:13px}.calendar-source-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10px}.calendar-source-copy .calendar-source-error{color:var(--danger);white-space:normal}.calendar-source-list article>button{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;border-radius:9px}.calendar-source-toggle{min-height:44px;display:flex;align-items:center;gap:5px;font-size:11px}.calendar-subscription-form{width:min(460px,100%)}.calendar-subscription-form .app-sheet__body label{display:grid;gap:6px;color:#756d61;font-size:12px;font-weight:650}.calendar-subscription-form input{min-height:44px;width:100%;padding:8px 11px;border:1px solid var(--border-cream)}.calendar-subscription-form input[type=color]{padding:5px;width:72px}.calendar-subscription-form .calendar-form-toggle{display:flex;align-items:center;min-height:44px}.calendar-subscription-form .calendar-form-toggle input{width:18px;min-height:18px}.calendar-view.loading{opacity:.72}@media(max-width:930px){.calendar-view{width:min(100%,630px)}.calendar-event-detail,.calendar-sources-sheet,.calendar-subscription-form{width:100%;max-width:100%;border-radius:20px 20px 0 0!important}}@media(max-width:720px){.calendar-view{width:100%;gap:13px}.calendar-heading h1{font-size:24px}.calendar-heading p{margin-top:5px}.calendar-heading .calendar-manage{font-size:0;padding:0;width:44px}.calendar-heading .calendar-manage svg{width:19px;height:19px}.calendar-toolbar{grid-template-columns:44px 54px minmax(0,1fr) 44px}.calendar-toolbar .calendar-today{width:54px}.calendar-source-list article{grid-template-columns:minmax(0,1fr) 44px 44px 44px}.calendar-source-toggle{grid-column:1/-1;grid-row:2}.calendar-event-row{grid-template-columns:9px 48px minmax(0,1fr) 20px}.calendar-filters{margin-inline:-4px;padding-inline:4px}}@media(max-width:390px){.calendar-event-row{gap:7px}.calendar-source-list article{gap:1px}}@media(min-width:931px){.calendar-view{padding-top:4px}.calendar-sources-sheet,.calendar-event-detail{border-radius:var(--radius-panel)}}@media(min-width:1440px){.calendar-view{width:min(100%,1040px)}}
diff --git a/frontend/src/lib/mvp-utils.test.ts b/frontend/src/lib/mvp-utils.test.ts
index 6585ebd..f723ea5 100644
--- a/frontend/src/lib/mvp-utils.test.ts
+++ b/frontend/src/lib/mvp-utils.test.ts
@@ -67,6 +67,8 @@ describe('MVP view utilities', () => {
     expect(readStoredNavigation(fakeStorage, 'dodo.navigation')).toEqual({ view: 'tasks', listId: 'list-2' })
     writeStoredNavigation(fakeStorage, 'dodo.navigation', 'memos', 'list-2')
     expect(readStoredNavigation(fakeStorage, 'dodo.navigation')).toEqual({ view: 'memos', listId: 'list-2' })
+    writeStoredNavigation(fakeStorage, 'dodo.navigation', 'calendar', 'list-2')
+    expect(readStoredNavigation(fakeStorage, 'dodo.navigation')).toEqual({ view: 'calendar', listId: 'list-2' })
     storage.set('dodo.navigation', JSON.stringify({ view: 'invalid', listId: 'list-2' }))
     expect(readStoredNavigation(fakeStorage, 'dodo.navigation')).toEqual({ view: 'today', listId: '' })
   })
diff --git a/frontend/src/lib/mvp-utils.ts b/frontend/src/lib/mvp-utils.ts
index 718c239..54db9e5 100644
--- a/frontend/src/lib/mvp-utils.ts
+++ b/frontend/src/lib/mvp-utils.ts
@@ -1,7 +1,7 @@
 type BooleanStorage = Pick<Storage, 'getItem' | 'setItem'>
-type NavigationView = 'tasks' | 'today' | 'upcoming' | 'trash' | 'habits' | 'countdowns' | 'memos' | 'settings'
+type NavigationView = 'tasks' | 'today' | 'upcoming' | 'trash' | 'habits' | 'countdowns' | 'memos' | 'calendar' | 'settings'
 type StoredNavigation = { view: NavigationView; listId: string }
-const NAVIGATION_VIEWS = new Set<NavigationView>(['tasks', 'today', 'upcoming', 'trash', 'habits', 'countdowns', 'memos', 'settings'])
+const NAVIGATION_VIEWS = new Set<NavigationView>(['tasks', 'today', 'upcoming', 'trash', 'habits', 'countdowns', 'memos', 'calendar', 'settings'])
 
 export function readStoredNavigation(storage: BooleanStorage, key: string): StoredNavigation {
   try {
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index dc9d5c7..4cf4a89 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './style.css'
 import './memo.css'
+import './calendar.css'
 
 createApp(App).mount('#app')
 if ('serviceWorker' in navigator && import.meta.env.PROD) {
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 5fc48aa..ab187ca 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -83,7 +83,7 @@ input,select,textarea{background:var(--surface-raised);border-color:var(--border
 .toast{background:#3b342c;color:#fff;border:1px solid #574d42;border-radius:var(--radius-control);box-shadow:var(--shadow-raised)}.error-toast{background:var(--danger);color:#fff;border:1px solid #9f2f22;border-radius:var(--radius-control);box-shadow:var(--shadow-raised)}
 :focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.task-check:focus-visible,.archived-lists-toggle:focus-visible,.archived-row-menu-trigger:focus-visible,.archived-row-actions button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
 @media(max-width:930px){.countdown-focus{height:144px;min-height:144px;max-height:144px;padding:10px 16px;gap:2px}.countdown-focus h3{margin:2px 0 0}.countdown-number{margin:0}}
-@media(max-width:930px){.bottom{left:0;right:0;bottom:0;height:calc(56px + var(--safe-area-bottom));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface-raised);border:0;border-top:1px solid var(--border-cream);border-radius:0;padding:4px 10px var(--safe-area-bottom);box-shadow:none}.bottom button{position:relative;min-width:0;min-height:44px;border-radius:0;padding:2px 4px;line-height:1.1}.bottom button svg{width:19px;height:19px}.bottom button.active{background:transparent;color:var(--accent)}.bottom button.active:before{content:"";position:absolute;left:23%;right:23%;top:-5px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}.sidebar{border-radius:0 var(--radius-panel) var(--radius-panel) 0}.detail,.app-sheet,.task-compose-sheet,.habit-detail-sheet,.countdown-detail-sheet{border-radius:var(--sheet-radius) var(--sheet-radius) 0 0!important}.task-list,.habit-list,.countdown-timeline{display:grid;gap:0}.task-row,.habit-row,.countdown-row{min-height:62px;background:var(--surface-raised);border:0;border-radius:0;box-shadow:none}.task-row+.task-row,.habit-row+.habit-row,.countdown-row+.countdown-row{border-top:1px solid var(--border-cream)}.countdown-row:first-of-type{border-top:0}.unified-fab{bottom:calc(68px + var(--safe-area-bottom))}}
+@media(max-width:930px){.bottom{left:0;right:0;bottom:0;height:calc(56px + var(--safe-area-bottom));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface-raised);border:0;border-top:1px solid var(--border-cream);border-radius:0;padding:4px 10px var(--safe-area-bottom);box-shadow:none}.bottom button{position:relative;min-width:0;min-height:44px;border-radius:0;padding:2px 4px;line-height:1.1}.bottom button svg{width:19px;height:19px}.bottom button.active{background:transparent;color:var(--accent)}.bottom button.active:before{content:"";position:absolute;left:23%;right:23%;top:-5px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}.sidebar{border-radius:0 var(--radius-panel) var(--radius-panel) 0}.detail,.app-sheet,.task-compose-sheet,.habit-detail-sheet,.countdown-detail-sheet{border-radius:var(--sheet-radius) var(--sheet-radius) 0 0!important}.task-list,.habit-list,.countdown-timeline{display:grid;gap:0}.task-row,.habit-row,.countdown-row{min-height:62px;background:var(--surface-raised);border:0;border-radius:0;box-shadow:none}.task-row+.task-row,.habit-row+.habit-row,.countdown-row+.countdown-row{border-top:1px solid var(--border-cream)}.countdown-row:first-of-type{border-top:0}.unified-fab{bottom:calc(68px + var(--safe-area-bottom))}}
 @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.completed-filter-pill,.completed-filter-pill__track,.completed-filter-pill__thumb{transition:none!important}.completed-filter-pill:active:not(:disabled){transform:none}.task-row.just-completed,.habit-row.just-completed,.task-row.just-completed .task-check-mark,.habit-row.just-completed .task-check-mark{animation:none}}
 /* Shared plain-list rows for active tasks and habits. */
 .plain-list{display:grid;gap:0;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
diff --git a/frontend/src/style.test.ts b/frontend/src/style.test.ts
index 5c8175b..8d6c194 100644
--- a/frontend/src/style.test.ts
+++ b/frontend/src/style.test.ts
@@ -118,16 +118,16 @@ describe('approved cream solid button system', () => {
 })
 
 describe('mobile navigation styles', () => {
-  it('renames the bottom More tab to a direct Settings tab', () => {
+  it('uses five direct mobile destinations and keeps Settings in the sidebar', () => {
     expect(app).not.toContain('aria-controls="mobile-more-menu"')
     expect(app).not.toContain('<Ellipsis/><span>更多</span>')
-    expect(app).toContain("<Settings/><span>设置</span>")
-    expect(app).toContain("@click=\"switchView('settings')\"")
-    expect(app).toContain('<span>设置</span>')
+    expect(app).toContain("<StickyNote/><span>备忘录</span>")
+    expect(app).toContain("<CalendarDays/><span>日历</span>")
+    expect(app).not.toContain("@click=\"switchView('settings')\"><Settings/><span>设置</span>")
   })
 
   it('marks only exact mobile destinations active and exposes aria-current only there', () => {
-    for (const view of ['today', 'habits', 'countdowns', 'settings']) {
+    for (const view of ['today', 'habits', 'countdowns', 'memos', 'calendar']) {
       expect(app).toContain(`:class="{active:activeView==='${view}'}" :aria-current="activeView==='${view}' ? 'page' : undefined"`)
     }
     expect(app).not.toContain("activeView==='tasks'||activeView==='upcoming'||activeView==='trash'||activeView==='settings'")