Calendar 日曆

整月視圖的日曆容器,格子裡可以放內容。使用 Element Plus 的 el-calendar。

設計準則

• 和 DatePickerPanel 的分工:選日期用面板;「看每天有什麼」才用 Calendar(排程總覽、活動月曆)
• 格子裡的內容要克制:每天最多 2 個標記,第 3 個起用「+N」收合
• 為什麼是 2 個:EP 的格高是固定的 --el-calendar-cell-width: 85px(套在 .el-calendar-day 的 height),上下內距 8px + 日期文字約 21px + 兩個 small 標記 20px + 4px 間距 ≈ 85px 剛好用滿,第 3 個標記會溢出到下一列
• 佔滿內容區寬度,適合當頁面主體,不要塞進小卡片

基本用法

loading

自訂格子內容

用 date-cell slot 在日期格標記排程:

loading

自訂日曆頭部(控制器)

用 header slot 換掉預設頭部;控制器透過 selectDate 提供五種類型: prev-year / prev-month / today / next-month / next-year,需要跨年翻頁時補上年份控制:

loading

Do / Don't

✅ Do	❌ Don't
看「每天有什麼」	只是選日期(用 DatePicker)
每格最多 2 個標記,更多用「+N」	一格塞十條文字(會溢出 85px 格高)
當頁面主體	塞進 300px 小卡片

給工程師

完整 API 見 Element Plus Calendar 文件。 本站規範優先於 EP 文件中的視覺建議。