diff --git a/README.md b/README.md
index 5a03209..29cc711 100644
--- a/README.md
+++ b/README.md
@@ -38,3 +38,5 @@ docker build -t task-manager-nginx .
 ```shell
 docker run -d -p 3001:3001 --restart unless-stopped --name task-manager-nginx task-manager-nginx
 ```
+## 查看页面
+http://taskmanagerserver.com:3001
diff --git a/next.config.mjs b/next.config.mjs
index cf75e3d..f49e64d 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export',
+    // Middleware cannot be used with "output: export".
+    // output: 'export',
     // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
     // trailingSlash: true,
 
diff --git a/package-lock.json b/package-lock.json
index 2f73c04..648a1f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,12 +16,14 @@
         "next": "14.1.3",
         "postcss": "8.4.31",
         "react": "^18",
+        "react-big-calendar": "^1.12.2",
         "react-dom": "^18",
         "tailwindcss": "3.3.3"
       },
       "devDependencies": {
         "@types/node": "^20",
         "@types/react": "^18",
+        "@types/react-big-calendar": "^1.8.9",
         "@types/react-dom": "^18",
         "@vercel/style-guide": "^5.0.1",
         "eslint": "^8",
@@ -1371,6 +1373,15 @@
         "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rc-component/color-picker": {
       "version": "1.5.3",
       "resolved": "https://registry.npmmirror.com/@rc-component/color-picker/-/color-picker-1.5.3.tgz",
@@ -1483,6 +1494,17 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmmirror.com/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.7.2",
       "resolved": "https://registry.npmmirror.com/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz",
@@ -1508,6 +1530,12 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
       }
     },
+    "node_modules/@types/date-arithmetic": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmmirror.com/@types/date-arithmetic/-/date-arithmetic-4.1.4.tgz",
+      "integrity": "sha512-p9eZ2X9B80iKiTW4ukVj8B4K6q9/+xFtQ5MGYA5HWToY9nL4EkhV9+6ftT2VHpVMEZb5Tv00Iel516bVdO+yRw==",
+      "dev": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1538,20 +1566,29 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmmirror.com/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/react": {
       "version": "18.2.64",
       "resolved": "https://registry.npmmirror.com/@types/react/-/react-18.2.64.tgz",
       "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-big-calendar": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmmirror.com/@types/react-big-calendar/-/react-big-calendar-1.8.9.tgz",
+      "integrity": "sha512-HIHLUxR3PzWHrFdZ00VnCMvDjAh5uzlL0vMC2b7tL3bKaAJsqq9T8h+x0GVeDbZfMfHAd1cs5tZBhVvourNJXQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/date-arithmetic": "*",
+        "@types/prop-types": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.2.21",
       "resolved": "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.2.21.tgz",
@@ -1564,8 +1601,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmmirror.com/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.8",
@@ -1573,6 +1609,11 @@
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.21.0",
       "resolved": "https://registry.npmmirror.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
@@ -2401,6 +2442,14 @@
       "resolved": "https://registry.npmmirror.com/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
@@ -2496,6 +2545,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/date-arithmetic": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/date-arithmetic/-/date-arithmetic-4.1.0.tgz",
+      "integrity": "sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg=="
+    },
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
@@ -2564,7 +2618,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2621,6 +2674,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -3884,6 +3946,11 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/globalize": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/globalize/-/globalize-0.1.1.tgz",
+      "integrity": "sha512-5e01v8eLGfuQSOvx2MsDMOWS0GFtCx1wPzQSmcHw4hkxFzrQDBO3Xwg/m8Hr/7qXMrHeOIE29qWVzyv06u1TZA=="
+    },
     "node_modules/globals": {
       "version": "13.24.0",
       "resolved": "https://registry.npmmirror.com/globals/-/globals-13.24.0.tgz",
@@ -4086,6 +4153,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmmirror.com/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -4606,6 +4681,11 @@
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4635,6 +4715,19 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/luxon": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmmirror.com/luxon/-/luxon-3.4.4.tgz",
+      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/merge2/-/merge2-1.4.1.tgz",
@@ -4717,6 +4810,25 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/moment-timezone": {
+      "version": "0.5.45",
+      "resolved": "https://registry.npmmirror.com/moment-timezone/-/moment-timezone-0.5.45.tgz",
+      "integrity": "sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==",
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -5978,6 +6090,33 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-big-calendar": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmmirror.com/react-big-calendar/-/react-big-calendar-1.12.2.tgz",
+      "integrity": "sha512-cPVcwH5V1YiC6QKaV4afvpuZ2DtP8+TocnZY98nGodqq8bfjVDiP3Ch+TewBZzj9mg7JbewHdufDZXZBqQl1lw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "clsx": "^1.2.1",
+        "date-arithmetic": "^4.1.0",
+        "dayjs": "^1.11.7",
+        "dom-helpers": "^5.2.1",
+        "globalize": "^0.1.1",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "luxon": "^3.2.1",
+        "memoize-one": "^6.0.0",
+        "moment": "^2.29.4",
+        "moment-timezone": "^0.5.40",
+        "prop-types": "^15.8.1",
+        "react-overlays": "^5.2.1",
+        "uncontrollable": "^7.2.1"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17 || ^18",
+        "react-dom": "^16.14.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz",
@@ -6000,6 +6139,25 @@
       "resolved": "https://registry.npmmirror.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-overlays": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmmirror.com/react-overlays/-/react-overlays-5.2.1.tgz",
+      "integrity": "sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.8",
+        "@popperjs/core": "^2.11.6",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
+      }
+    },
     "node_modules/reactcss": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/reactcss/-/reactcss-1.2.3.tgz",
@@ -7064,6 +7222,20 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmmirror.com/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-5.26.5.tgz",
diff --git a/package.json b/package.json
index 5643b5f..3b21c52 100644
--- a/package.json
+++ b/package.json
@@ -17,12 +17,14 @@
     "next": "14.1.3",
     "postcss": "8.4.31",
     "react": "^18",
+    "react-big-calendar": "^1.12.2",
     "react-dom": "^18",
     "tailwindcss": "3.3.3"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-big-calendar": "^1.8.9",
     "@types/react-dom": "^18",
     "@vercel/style-guide": "^5.0.1",
     "eslint": "^8",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 61e1b2c..b2e603d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "@/ui/globals.css";
+import Script from "next/script";
 
 export const metadata: Metadata = {
   title: "任务管理",
@@ -17,7 +18,9 @@ export default function RootLayout({
 }>) {
   return (
       <html>
-        <body style={{margin: 0}}>{children}</body>
+      <Script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"/>
+      <Script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/zh-cn.js"/>
+      <body style={{margin: 0}}>{children}</body>
       </html>
-);
+  );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 90e35dc..2303575 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,11 @@
 'use client'
 import {usePathname, useRouter} from "next/navigation";
-
+import dayjs from "dayjs";
 export default function Home() {
     console.log('app.usePathname()', usePathname());
   const { replace } = useRouter();
   replace("/task/four")
+  dayjs.locale('zh-cn')
   return (
       <main className="flex min-h-screen flex-col p-6">
       </main>
diff --git a/src/app/task/calendar/page.tsx b/src/app/task/calendar/page.tsx
new file mode 100644
index 0000000..9c86954
--- /dev/null
+++ b/src/app/task/calendar/page.tsx
@@ -0,0 +1,10 @@
+import CalShow from "@/ui/task/calendar/CalShow";
+const Page: React.FC = () => {
+  return (
+      <>
+        <CalShow/>
+      </>
+  );
+};
+
+export default Page;
diff --git a/src/lib/task/project/data.tsx b/src/lib/task/project/data.tsx
index e00ba23..94ac056 100644
--- a/src/lib/task/project/data.tsx
+++ b/src/lib/task/project/data.tsx
@@ -217,5 +217,6 @@ export enum OPERATION_BUTTON_TYPE {
     DELETE,
     COMPLETE,
     SHOW_FOUR,
+    SHOW_CALENDAR,
     ADD,
 }
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..9fd3a1e
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+// export const config = {
+//     matcher: ['/task/four', '/task/project','/search/task_message_tree'],
+// }
+
+export function middleware(request: NextRequest) {
+    // Clone the request headers and set a new header `x-hello-from-middleware1`
+    // const requestHeaders = new Headers(request.headers)
+    // requestHeaders.set('x-hello-from-middleware1', 'hello')
+    console.log('middleware:',request)
+    // You can also set request headers in NextResponse.rewrite
+    const response = NextResponse.next({
+        request: {
+            // New request headers
+            // headers: requestHeaders,
+        },
+    })
+
+    // Set a new response header `x-hello-from-middleware2`
+    response.headers.set('x-hello-from-middleware2', 'hello')
+    return response
+}
diff --git a/src/ui/task/OperationButton.tsx b/src/ui/task/OperationButton.tsx
index 9cc05be..09fa5dc 100644
--- a/src/ui/task/OperationButton.tsx
+++ b/src/ui/task/OperationButton.tsx
@@ -113,6 +113,10 @@ class OperationButton extends React.Component<OperationButtonProps, OperationMod
             {
                 key: OPERATION_BUTTON_TYPE.SHOW_FOUR,
                 label: <Link href={"/task/four?pid=" + this.props.itemId}>四象限显示子任务</Link>,
+            },
+            {
+                key: OPERATION_BUTTON_TYPE.SHOW_CALENDAR,
+                label: <Link href={"/task/calendar?pid=" + this.props.itemId}>日历显示子任务</Link>,
             }
         ];
         return <Fragment>
diff --git a/src/ui/task/TitleOperation.tsx b/src/ui/task/TitleOperation.tsx
index 10ef64e..cc5cf7d 100644
--- a/src/ui/task/TitleOperation.tsx
+++ b/src/ui/task/TitleOperation.tsx
@@ -37,11 +37,19 @@ export const TitleOperation: React.FC<TitleOperationProps> = ({
                     replace("/task/four");
                     // setCurrentPath("/task/four");
                 }}>四象限显示</Button>
+                <Button type="primary" onClick={() => {
+                    replace("/task/calendar");
+                    // setCurrentPath("/task/project")
+                }}>日历显示</Button>
             </> : <>
                 <Button type="primary" onClick={() => {
                     replace("/task/project");
                     // setCurrentPath("/task/project")
                 }}>任务树</Button>
+                <Button type="primary" onClick={() => {
+                    replace("/task/calendar");
+                    // setCurrentPath("/task/project")
+                }}>日历显示</Button>
                 <span style={{whiteSpace: 'nowrap'}}>任务状态:</span>
                 <Select
                     mode="multiple"
diff --git a/src/ui/task/calendar/CalShow.tsx b/src/ui/task/calendar/CalShow.tsx
new file mode 100644
index 0000000..bd626e8
--- /dev/null
+++ b/src/ui/task/calendar/CalShow.tsx
@@ -0,0 +1,98 @@
+'use client'
+import React, {useEffect} from "react";
+import {Calendar, dayjsLocalizer, Event, View} from 'react-big-calendar'
+// https://day.js.org/docs/zh-CN/get-set/get-set
+import dayjs from 'dayjs'
+import 'react-big-calendar/lib/css/react-big-calendar.css'
+import {getTaskTreeResult} from "@/lib/task/project/data";
+import {useSearchParams} from "next/dist/client/components/navigation";
+
+/**
+ * https://github.com/jquense/react-big-calendar?tab=readme-ov-file
+ * @constructor
+ */
+const localizer = dayjsLocalizer(dayjs)
+const CalShow: React.FC = () => {
+    dayjs.locale('zh-cn')
+    const [view, setView] = React.useState<View>('month');
+    const [date, setDate] = React.useState<Date>(new Date());
+    // 展示在页面的任务,默认获取当前月的信息。
+    const [events,setEvents] = React.useState<Event[]>([]);
+    const handleViewChange = (newView:View) => {
+        setView(newView);
+    };
+    var pid = useSearchParams().get('pid');
+    useEffect(() => {
+        const searchListE=[]
+        if (pid!=null) {
+            searchListE.push({name:"pid",value:pid,operateType:"="},{name:'TREE',value:"false",operateType: "TREE"});
+        }
+        if (view==='month'){
+            searchListE.push({name:'expectedStartTime',value:dayjs(date).startOf('month'),operateType:">="})
+            searchListE.push({name:'expectedStartTime',value:dayjs(date).endOf('month'),operateType:"<="})
+        }else {
+            searchListE.push({name:'expectedStartTime',value:dayjs(date).startOf('week'),operateType:">="})
+            searchListE.push({name:'expectedStartTime',value:dayjs(date).endOf('week'),operateType:"<="})
+        }
+        searchListE.push({name:'expectedEndTime',value:dayjs(date).endOf('month'),operateType:"NOT NULL"})
+        let request = JSON.stringify({
+            pageSize:9999,
+            pageNumber:1,
+            data: searchListE
+        })
+        const response = getTaskTreeResult(request)
+        response.then(responseD=>{
+            if(responseD.status.success){
+                setEvents(responseD.data.content.map(taskState=>{
+                    return {
+                        start:dayjs(taskState.expectedStartTime).toDate(),
+                        end:dayjs(taskState.expectedEndTime).toDate(),
+                        title:taskState.name
+                    }
+                }))
+            }
+        })
+    }, []);
+
+    const handleNavigate = (newDate:Date) => {
+        console.log('handleNavigate',newDate)
+        setDate(newDate);
+        const searchList=[]
+        if (pid!=null) {
+            searchList.push({name:"pid",value:pid,operateType:"="},{name:'TREE',value:"false",operateType: "TREE"});
+        }
+        searchList.push({name:'expectedStartTime',value:dayjs(newDate).startOf('month'),operateType:">="})
+        searchList.push({name:'expectedStartTime',value:dayjs(newDate).endOf('month'),operateType:"<="})
+        searchList.push({name:'expectedEndTime',value:dayjs(newDate).endOf('month'),operateType:"NOT NULL"})
+        let request = JSON.stringify({
+            pageSize:9999,
+            pageNumber:1,
+            data: searchList
+        })
+        const response = getTaskTreeResult(request)
+        response.then(responseD=>{
+            if(responseD.status.success){
+                setEvents(responseD.data.content.map(taskState=>{
+                    return {
+                        start:dayjs(taskState.expectedStartTime).toDate(),
+                        end:dayjs(taskState.expectedEndTime).toDate(),
+                        title:taskState.name
+                    }
+                }))
+            }
+        })
+    };
+
+    return <div className="App" style={{ height: '90vh' }}>
+        <Calendar
+            localizer={localizer}
+            events={events}
+            view={view}
+            onView={handleViewChange}
+            // onRangeChange={rangeChange}
+            date={date}
+            onNavigate={handleNavigate}
+        />
+    </div>
+}
+export default CalShow;
diff --git a/src/ui/task/four/TreeTable.tsx b/src/ui/task/four/TreeTable.tsx
index fadaa19..c8ed907 100644
--- a/src/ui/task/four/TreeTable.tsx
+++ b/src/ui/task/four/TreeTable.tsx
@@ -2,8 +2,8 @@
 import React, {useContext, useEffect, useState} from 'react';
 import {ConfigProvider, Table} from 'antd';
 import type {TableColumnsType, TableProps} from 'antd';
-import {getTaskTreeResult, taskPriorityList, taskStateList, taskTreeResult} from "@/lib/task/project/data";
-import {DataType, ResponseVO, ResultPage} from "@/lib/definitions";
+import {taskPriorityList, taskStateList} from "@/lib/task/project/data";
+import {DataType} from "@/lib/definitions";
 import OperationButton from "@/ui/task/OperationButton";
 import "@/ui/task/four/detailForm.modules.css"
 import LocalContext from "@/ui/LocalContent";
diff --git a/src/ui/task/project/TreeTablePro.modules.css b/src/ui/task/project/TreeTablePro.modules.css
new file mode 100644
index 0000000..399e26e
--- /dev/null
+++ b/src/ui/task/project/TreeTablePro.modules.css
@@ -0,0 +1,6 @@
+ .odd {
+     background-color: #fff;
+ }
+ .even {
+     background-color: rgb(209, 192, 192);
+ }
diff --git a/src/ui/task/project/TreeTablePro.tsx b/src/ui/task/project/TreeTablePro.tsx
index 3279480..d37b1a1 100644
--- a/src/ui/task/project/TreeTablePro.tsx
+++ b/src/ui/task/project/TreeTablePro.tsx
@@ -17,6 +17,7 @@ import {
 import {DetailModelForm} from "@/ui/task/project/DetailModelForm";
 import OperationButton from "@/ui/task/OperationButton";
 import dayjs from "dayjs";
+import '@/ui/task/project/TreeTablePro.modules.css'
 
 const TreeTablePro: React.FC = () => {
     const actionRef = useRef<ActionType>();
@@ -207,6 +208,7 @@ const TreeTablePro: React.FC = () => {
                 // },
             }}
             rowKey="id"
+            rowClassName={(record, i) => (i % 2 === 1 ? "even" : "odd")}
             pagination={{
                 current: current,
                 pageSize: pageSize,
@@ -217,7 +219,7 @@ const TreeTablePro: React.FC = () => {
                 }
             }}
             dateFormatter="string"
-            scroll={{y: 600}}
+            scroll={{y: 580}}
             // headerTitle="任务管理"
             toolBarRender={()=>toolBarRenderList}>
         </ProTable>