diff --git a/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
index 410d7f5c..7073297a 100644
--- a/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -112,6 +112,13 @@ import UserProfile from '@/layouts/components/UserProfile.vue'
           to: '/subscribe-tv',
         }"
       />
+      <VerticalNavLink
+        :item="{
+          title: '日历',
+          icon: 'mdi-calendar',
+          to: '/calendar',
+        }"
+      />
       <!-- 👉 整理 -->
       <VerticalNavSectionTitle
         :item="{
diff --git a/src/pages/calendar.vue b/src/pages/calendar.vue
new file mode 100644
index 00000000..708a2417
--- /dev/null
+++ b/src/pages/calendar.vue
@@ -0,0 +1,11 @@
+<template>
+  <VCalendar ref="calendar" v-model="start" :type="type" :end="end" color="primary"></VCalendar>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const start = ref('2019-01-01');
+const end = ref('2019-01-06');
+const type = ref('month');
+</script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 3af83afc..2c8d0cf9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,5 @@
-import { createRouter, createWebHistory } from 'vue-router'
 import store from '@/store'
+import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -44,6 +44,13 @@ const router = createRouter({
             requiresAuth: true,
           },
         },
+        {
+          path: 'calendar',
+          component: () => import('../pages/calendar.vue'),
+          meta: {
+            requiresAuth: true,
+          },
+        },
         {
           path: 'downloading',
           component: () => import('../pages/downloading.vue'),