From eb3439c568af207e107a6822fc506b284c0e4f13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=A4=A9=E4=BD=91?=
 <66231260+You-Hw-Y@users.noreply.github.com>
Date: Wed, 27 Dec 2023 23:33:44 -0800
Subject: [PATCH] docs(calendar-view): [calendar-view] optimize docs and demos
 (#1228)

* docs(calendar-view): [calendar-view] optimize docs and demos

* docs(calendar-view): [calendar-view] optimize docs and demos
---
 .../pc/app/calendar-view/basic-usage.spec.ts  | 18 +++++++++++++
 .../calendar-view/calendar-day-mark.spec.ts   | 23 +++++++++++++++++
 .../calendar-disabled-day-composition-api.vue |  4 +--
 .../calendar-disabled-day.spec.ts             | 12 +++++++++
 .../calendar-view/calendar-disabled-day.vue   |  2 +-
 .../app/calendar-view/calendar-event.spec.ts  | 25 +++++++++++++++++++
 .../app/calendar-view/calendar-mode.spec.ts   | 25 +++++++++++++++++++
 .../calendar-schedule-slot.spec.ts            | 18 +++++++++++++
 .../calendar-timeline-range.spec.ts           | 11 ++++++++
 .../calendar-timeline-slot.spec.ts            | 23 +++++++++++++++++
 .../custom-calendar-toolbar.spec.ts           |  8 ++++++
 .../calendar-view/custom-day-bg-color.spec.ts |  8 ++++++
 .../app/calendar-view/custom-header.spec.ts   | 11 ++++++++
 .../hide-mode-composition-api.vue             |  7 ------
 .../demos/pc/app/calendar-view/hide-mode.vue  | 13 ----------
 .../mode-combination-composition-api.vue      |  7 ------
 .../pc/app/calendar-view/mode-combination.vue | 14 -----------
 .../multi-select-composition-api.vue          |  4 +--
 .../pc/app/calendar-view/multi-select.spec.ts | 13 ++++++++++
 .../pc/app/calendar-view/multi-select.vue     |  2 +-
 .../set-working-day-composition-api.vue       | 10 +++-----
 .../app/calendar-view/set-working-day.spec.ts | 22 ++++++++++++++++
 .../pc/app/calendar-view/set-working-day.vue  |  2 +-
 .../app/calendar-view/webdoc/calendar-view.js |  2 +-
 24 files changed, 228 insertions(+), 56 deletions(-)
 create mode 100644 examples/sites/demos/pc/app/calendar-view/basic-usage.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/calendar-day-mark.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/calendar-mode.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/calendar-timeline-range.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/custom-day-bg-color.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/custom-header.spec.ts
 delete mode 100644 examples/sites/demos/pc/app/calendar-view/hide-mode-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/calendar-view/hide-mode.vue
 delete mode 100644 examples/sites/demos/pc/app/calendar-view/mode-combination-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/calendar-view/mode-combination.vue
 create mode 100644 examples/sites/demos/pc/app/calendar-view/multi-select.spec.ts
 create mode 100644 examples/sites/demos/pc/app/calendar-view/set-working-day.spec.ts

diff --git a/examples/sites/demos/pc/app/calendar-view/basic-usage.spec.ts b/examples/sites/demos/pc/app/calendar-view/basic-usage.spec.ts
new file mode 100644
index 000000000..56a641142
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/basic-usage.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#basic-usage')
+  const demoPage = page.locator('#basic-usage')
+  const fixWeek2 = page.getByText('前端周会2').first()
+  const popWeek2 = page.locator('.title').filter({ hasText: '前端周会2' })
+  // 校验固定内容
+  await expect(demoPage).toHaveText(/15前端周会2前端周会2-1前端周会1/)
+  await expect(demoPage).toHaveText(/16前端周会4前端周会3/)
+  await expect(demoPage).toHaveText(/25节假日25-28前端周会5/)
+  await expect(demoPage.locator('.events-end').first()).toHaveClass(/bg-green/)
+  // 校验hover弹出框
+  await fixWeek2.hover()
+  await page.waitForTimeout(200)
+  await expect(popWeek2).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-day-mark.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-day-mark.spec.ts
new file mode 100644
index 000000000..82acb2754
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-day-mark.spec.ts
@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('日期标记', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-day-mark')
+  const listitem = page.getByRole('listitem')
+  const day30 = listitem.filter({ hasText: '30周日' }).locator('span').nth(2)
+  const day1 = listitem.filter({ hasText: '1周一' }).locator('span').nth(2)
+  const day6 = listitem.filter({ hasText: '6周六' }).locator('span').nth(2)
+  const day7 = page.getByText('7周日')
+  const rightSvg = page.locator('.header-right > .tiny-svg')
+  const day8 = listitem.filter({ hasText: '8周一' }).locator('span').nth(2)
+  await expect(day30).toBeVisible()
+  await expect(day1).toHaveClass(/mark/)
+  await expect(day1).toHaveClass(/mark-red/)
+  await expect(day6).toHaveClass(/mark/)
+  await expect(day7).not.toBeVisible()
+  await rightSvg.click()
+  await page.waitForTimeout(200)
+  await expect(day7).toBeVisible()
+  await expect(day8).toHaveClass(/mark/)
+  await expect(day8).toHaveClass(/mark-red/)
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue
index f4dc6bf5e..303fb92c7 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue
@@ -2,13 +2,13 @@
   <tiny-calendar-view :events="eventslist" :year="2023" :month="5" :disabled="disabled"></tiny-calendar-view>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import { CalendarView as TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([])
 
 const disabled = (date) => {
-  return date.split('-')[2] < 5
+  return date.split('-')[2] < 15
 }
 </script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts
new file mode 100644
index 000000000..096bfa5c1
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts
@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('日期禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-disabled-day')
+  const day10 = page.getByText('10').nth(1)
+  const day14 = page.getByText('14').nth(1)
+  const day15 = page.getByText('15').nth(1)
+  await expect(day10).toHaveClass(/is-disabled/)
+  await expect(day14).toHaveClass(/is-disabled/)
+  await expect(day15).toHaveClass('date')
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.vue b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.vue
index 361560249..a3d1cdd79 100644
--- a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.vue
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day.vue
@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     disabled(date) {
-      return date.split('-')[2] < 5
+      return date.split('-')[2] < 15
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts
new file mode 100644
index 000000000..d90023105
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-event.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-event')
+  const timeInput = page.locator('.tiny-filter-box').locator('.value')
+  const timeBtn = page.getByText('2023 年 05 月')
+  const leftYear = page.getByRole('button', { name: '前一年' })
+  const month6 = page.getByText('六月')
+  const leftSvg = page.locator('.header-left > .tiny-svg')
+  const rightSvg = page.locator('.header-right > .tiny-svg')
+  await timeBtn.click()
+  await page.waitForTimeout(100)
+  await leftYear.click()
+  await page.waitForTimeout(100)
+  await month6.click()
+  await page.waitForTimeout(100)
+  await expect(timeInput).toHaveText('2022 年 06 月')
+  await leftSvg.click()
+  await page.waitForTimeout(100)
+  await expect(timeInput).toHaveText('2022 年 05 月')
+  await rightSvg.click()
+  await page.waitForTimeout(100)
+  await expect(timeInput).toHaveText('2022 年 06 月')
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-mode.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-mode.spec.ts
new file mode 100644
index 000000000..7a00da596
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-mode.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('显示模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-mode')
+  const monthBtn = page.locator('label').nth(2)
+  const timelineBtn = page.locator('label').nth(3)
+  const scheduleBtn = page.locator('label').nth(4)
+  const dmonthDom = page.locator('.tiny-calendar-view-month__main')
+  const timelineDom = page.locator('.tiny-calendar-view-week__timeline')
+  const scheduleDom = page.locator('.tiny-calendar-view-week__schedule')
+  // 验证按钮是否选中，验证时间组件页面是否正确
+  await expect(monthBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
+  await expect(dmonthDom).toBeVisible()
+
+  await timelineBtn.click()
+  await page.waitForTimeout(100)
+  await expect(timelineBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
+  await expect(timelineDom).toBeVisible()
+
+  await scheduleBtn.click()
+  await page.waitForTimeout(100)
+  await expect(scheduleBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
+  await expect(scheduleDom).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot.spec.ts
new file mode 100644
index 000000000..c800a64dd
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('日程模式插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-schedule-slot')
+  const solt1 = page.locator('.new-schedule').first()
+  const soltData1 = page.getByText('新增事件2023-4-30')
+  const solt5 = page.locator('li:nth-child(5) > .new-schedule')
+  const soltData5 = page.getByText('新增事件2023-5-4')
+  await expect(solt1).toBeVisible()
+  await page.waitForTimeout(200)
+  await solt1.click()
+  await page.waitForTimeout(100)
+  await expect(soltData1).toBeVisible()
+  await solt5.click()
+  await page.waitForTimeout(100)
+  await expect(soltData5).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range.spec.ts
new file mode 100644
index 000000000..4e4aa0d50
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('时间线范围配置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-timeline-range')
+  const dayTime = page.locator('.day-times')
+  const firstTime = dayTime.locator('ul>li>span').first()
+  const lastTime = dayTime.getByText('21:00')
+  await expect(firstTime).toHaveText('10:00')
+  await expect(lastTime).not.toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot.spec.ts b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot.spec.ts
new file mode 100644
index 000000000..b87a5ebae
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot.spec.ts
@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('时间线插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-timeline-slot')
+  const demoPage = page.locator('#calendar-timeline-slot')
+  const fixWeek2 = page.getByText('前端周会2').first()
+  const popWeek2 = page.locator('.title').filter({ hasText: '前端周会2' })
+  const fixWeek = page.locator('#calendar-timeline-slot').getByText('节假日25-28')
+  const popWeek = page.locator('.title').filter({ hasText: '节假日25-28' })
+  // 校验固定内容
+  await expect(demoPage).toHaveText(/15前端周会2前端周会2-1前端周会1/)
+  await expect(demoPage).toHaveText(/16前端周会4前端周会3/)
+  await expect(demoPage).toHaveText(/25节假日25-28前端周会5/)
+  await expect(demoPage.locator('.events-end').first()).toHaveClass(/bg-green/)
+  // 校验hover弹出框
+  await fixWeek2.hover()
+  await page.waitForTimeout(100)
+  await expect(popWeek2).toBeVisible()
+  await fixWeek.hover()
+  await page.waitForTimeout(100)
+  await expect(popWeek).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar.spec.ts b/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar.spec.ts
new file mode 100644
index 000000000..52ae18cb4
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义工具栏', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#custom-calendar-toolbar')
+  const toolDom = page.getByRole('paragraph').filter({ hasText: '此处为自定义工具栏插槽' })
+  await expect(toolDom).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color.spec.ts b/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color.spec.ts
new file mode 100644
index 000000000..8da9f7098
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color.spec.ts
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义单元格背景色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#custom-day-bg-color')
+  const selectDay = page.getByRole('listitem').filter({ hasText: '10' }).first()
+  await expect(selectDay).toHaveClass(/bg-red/)
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-header.spec.ts b/examples/sites/demos/pc/app/calendar-view/custom-header.spec.ts
new file mode 100644
index 000000000..87aeb8172
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/custom-header.spec.ts
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义头部显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#custom-header')
+  const timelineBtn = page.locator('label').nth(3)
+  const customHeader = page.getByText('2023-5-3 周三')
+  await timelineBtn.click()
+  await page.waitForTimeout(200)
+  await expect(customHeader).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/hide-mode-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/hide-mode-composition-api.vue
deleted file mode 100644
index 890704284..000000000
--- a/examples/sites/demos/pc/app/calendar-view/hide-mode-composition-api.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <tiny-calendar-view :modes="[]"></tiny-calendar-view>
-</template>
-
-<script setup lang="ts">
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
-</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/hide-mode.vue b/examples/sites/demos/pc/app/calendar-view/hide-mode.vue
deleted file mode 100644
index 9b09f0787..000000000
--- a/examples/sites/demos/pc/app/calendar-view/hide-mode.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <tiny-calendar-view :modes="[]"> </tiny-calendar-view>
-</template>
-
-<script>
-import { CalendarView } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCalendarView: CalendarView
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/mode-combination-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/mode-combination-composition-api.vue
deleted file mode 100644
index e35cc7c15..000000000
--- a/examples/sites/demos/pc/app/calendar-view/mode-combination-composition-api.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <tiny-calendar-view :modes="['timeline', 'schedule']" mode="timeline"></tiny-calendar-view>
-</template>
-
-<script setup lang="ts">
-import { CalendarView as TinyCalendarView } from '@opentiny/vue'
-</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/mode-combination.vue b/examples/sites/demos/pc/app/calendar-view/mode-combination.vue
deleted file mode 100644
index ddfe65631..000000000
--- a/examples/sites/demos/pc/app/calendar-view/mode-combination.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <tiny-calendar-view :modes="['timeline', 'schedule']" mode="timeline"> </tiny-calendar-view>
-</template>
-
-<script>
-import { CalendarView } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyCalendarView: CalendarView
-  },
-  methods: {}
-}
-</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
index 44521d75d..5bc650ace 100644
--- a/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
@@ -11,13 +11,13 @@
   </tiny-calendar-view>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import { CalendarView as TinyCalendarView, Modal } from '@opentiny/vue'
 
 const eventslist = ref([])
 
 const selectedDateChange = (date) => {
-  Modal.message(`当前选择${JSON.stringify(date)}`)
+  Modal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
 }
 </script>
diff --git a/examples/sites/demos/pc/app/calendar-view/multi-select.spec.ts b/examples/sites/demos/pc/app/calendar-view/multi-select.spec.ts
new file mode 100644
index 000000000..0a669b355
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/multi-select.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('日期多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#multi-select')
+  const selectDay16 = page.getByRole('listitem').filter({ hasText: '16' })
+  const selectDay17 = page.getByRole('listitem').filter({ hasText: '17' })
+  await selectDay16.click()
+  await selectDay17.click()
+  await page.waitForTimeout(100)
+  await expect(selectDay16.locator('.day-selected')).toBeVisible()
+  await expect(selectDay17.locator('.day-selected')).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/multi-select.vue b/examples/sites/demos/pc/app/calendar-view/multi-select.vue
index a775b056d..37c4e1062 100644
--- a/examples/sites/demos/pc/app/calendar-view/multi-select.vue
+++ b/examples/sites/demos/pc/app/calendar-view/multi-select.vue
@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     selectedDateChange(date) {
-      Modal.message(`当前选择${JSON.stringify(date)}`)
+      Modal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
index 471b9af18..a32547976 100644
--- a/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
+++ b/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
@@ -16,13 +16,9 @@
   </tiny-calendar-view>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
-import {
-  CalendarView as TinyCalendarView,
-  Button as TinyButton,
-  Modal
-} from '@opentiny/vue'
+import { CalendarView as TinyCalendarView, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const workingDays = ref([])
 const offDays = ref([])
@@ -37,7 +33,7 @@ const map = {
 
 const setDays = (type) => {
   if (!selectedDate.value.length) {
-    Modal.message('请选择日期')
+    Modal.message({ message: '请选择日期', status: 'info' })
     return
   }
   map[type].value.push(...selectedDate.value)
diff --git a/examples/sites/demos/pc/app/calendar-view/set-working-day.spec.ts b/examples/sites/demos/pc/app/calendar-view/set-working-day.spec.ts
new file mode 100644
index 000000000..26345799e
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/set-working-day.spec.ts
@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('设置工作日或节假日', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#set-working-day')
+  const workDay = page.getByRole('button', { name: '工作日' })
+  const restDay = page.getByRole('button', { name: '休息日' })
+  const holiDay = page.getByRole('button', { name: '节假日' })
+  const selectDay16 = page.getByRole('listitem').filter({ hasText: '16' })
+  const selectDay17 = page.getByRole('listitem').filter({ hasText: '17' })
+  const selectDay18 = page.getByRole('listitem').filter({ hasText: '18' })
+  await selectDay16.click()
+  await workDay.click()
+  await selectDay17.click()
+  await restDay.click()
+  await selectDay18.click()
+  await holiDay.click()
+  await page.waitForTimeout(200)
+  await expect(selectDay16).toHaveClass(/bg-blue/)
+  await expect(selectDay17).toHaveClass(/bg-green/)
+  await expect(selectDay18).toHaveClass(/bg-yellow/)
+})
diff --git a/examples/sites/demos/pc/app/calendar-view/set-working-day.vue b/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
index 5fab61d69..ac82d2a22 100644
--- a/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
+++ b/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
@@ -35,7 +35,7 @@ export default {
   methods: {
     setDays(type) {
       if (!this.selectedDate.length) {
-        Modal.message('请选择日期')
+        Modal.message({ message: '请选择日期', status: 'info' })
         return
       }
       this[type].push(...this.selectedDate)
diff --git a/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js b/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
index 1c0e1db3a..f43994f2c 100644
--- a/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
+++ b/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
@@ -97,7 +97,7 @@ export default {
     },
     {
       'demoId': 'custom-day-bg-color',
-      'name': { 'zh-CN': '自定义日期单元格背景色', 'en-US': 'Add Schedule Event' },
+      'name': { 'zh-CN': '自定义单元格背景色', 'en-US': 'Add Schedule Event' },
       'desc': {
         'zh-CN':
           '<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',