diff --git a/examples/sites/demos/pc/app/calendar-view/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/basic-usage-composition-api.vue
new file mode 100644
index 0000000000..9c52975aa6
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/basic-usage-composition-api.vue
@@ -0,0 +1,74 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5"></tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([
+  {
+    title: '前端周会1',
+    start: '2023-05-15 8:30:00',
+    end: '2023-05-15 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2',
+    start: '2023-05-15 10:00:00',
+    end: '2023-05-15 12:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  },
+  {
+    title: '前端周会2-1',
+    start: '2023-05-15 13:00:00',
+    end: '2023-05-15 15:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'red'
+  },
+  {
+    title: '前端周会3',
+    start: '2023-05-16 9:00:00',
+    end: '2023-05-16 10:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'yellow'
+  },
+  {
+    title: '前端周会4',
+    start: '2023-05-16 11:00:00',
+    end: '2023-05-16 14:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'purple'
+  },
+  {
+    title: '前端周会5',
+    start: '2023-05-25 8:00:00',
+    end: '2023-05-25 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'cyan'
+  },
+  {
+    title: '前端周会6',
+    start: '2023-05-26 8:00:00',
+    end: '2023-05-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会7',
+    start: '2023-05-27 8:30:00',
+    end: '2023-05-27 9:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '节假日25-28',
+    start: '2023-05-25 10:30:00',
+    end: '2023-05-28 03:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue
new file mode 100644
index 0000000000..8f2af3c039
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue
@@ -0,0 +1,22 @@
+<template>
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="5"
+    mode="timeline"
+    :show-mark="showMark"
+    mark-color="red"
+  >
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([])
+
+const showMark = (date) => {
+  return date.split('-')[2] < 10
+}
+</script>
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
new file mode 100644
index 0000000000..f4dc6bf5e4
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue
@@ -0,0 +1,14 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5" :disabled="disabled"></tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([])
+
+const disabled = (date) => {
+  return date.split('-')[2] < 5
+}
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue
new file mode 100644
index 0000000000..c79d6a7276
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue
@@ -0,0 +1,40 @@
+<template>
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="5"
+    @prev-week-click="prevWeekClick"
+    @next-week-click="nextWeekClick"
+    @week-change="weekChange"
+    @year-change="yearChange"
+    @month-change="monthChange"
+  >
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([])
+
+const prevWeekClick = (date) => {
+  console.log(date)
+}
+
+const nextWeekClick = (date) => {
+  console.log(date)
+}
+
+const weekChange = (oldVal, newVal) => {
+  console.log(oldVal, newVal)
+}
+
+const yearChange = (oldVal, newVal) => {
+  console.log(oldVal, newVal)
+}
+
+const monthChange = (oldVal, newVal) => {
+  console.log(oldVal, newVal)
+}
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue
new file mode 100644
index 0000000000..36668b0625
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue
@@ -0,0 +1,11 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([])
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue
new file mode 100644
index 0000000000..649eca5973
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue
@@ -0,0 +1,121 @@
+<template>
+  <tiny-calendar-view
+    :events="eventslist"
+    mode="schedule"
+    :modes="['schedule', 'timeline']"
+    :year="2023"
+    :month="5"
+    :show-new-schedule="showNewSchedule"
+    @new-schedule="newSchedule"
+  >
+    <template #weekday1="{ slotScope }">
+      <div v-for="(event, index) in slotScope.events" :key="index" class="event">
+        <p class="title">{{ event.title }}</p>
+        <p class="content">{{ event.content }}</p>
+      </div>
+    </template>
+    <template #weekday2="{ slotScope }">
+      <div v-for="(event, index) in slotScope.events" :key="index" class="event">
+        <p class="title">{{ event.title }}</p>
+        <p class="content">{{ event.content }}</p>
+      </div>
+    </template>
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([
+  {
+    title: '前端周会1',
+    start: '2023-05-15 8:30:00',
+    end: '2023-05-15 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2',
+    start: '2023-05-15 10:00:00',
+    end: '2023-05-15 12:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  },
+  {
+    title: '前端周会2-1',
+    start: '2023-05-15 13:00:00',
+    end: '2023-05-15 15:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'red'
+  },
+  {
+    title: '前端周会3',
+    start: '2023-05-16 9:00:00',
+    end: '2023-05-16 10:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'yellow'
+  },
+  {
+    title: '前端周会4',
+    start: '2023-05-16 11:00:00',
+    end: '2023-05-16 14:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'purple'
+  },
+  {
+    title: '前端周会5',
+    start: '2023-05-25 8:00:00',
+    end: '2023-05-25 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'cyan'
+  },
+  {
+    title: '前端周会6',
+    start: '2023-05-26 8:00:00',
+    end: '2023-05-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会7',
+    start: '2023-05-27 8:30:00',
+    end: '2023-05-27 9:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '节假日25-28',
+    start: '2023-05-25 10:30:00',
+    end: '2023-05-28 03:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  }
+])
+
+const showNewSchedule = (date) => {
+  return true
+}
+
+const newSchedule = (date) => {
+  const event = {
+    title: '新增事件' + date,
+    start: date + ' 10:30:00',
+    end: date + ' 12:30:00',
+    content: '新增事件随机事件 新增事件随机事件 新增事件随机事件 新增事件随机事件 ',
+    theme: 'blue'
+  }
+
+  eventslist.value.push(event)
+}
+</script>
+
+<style scoped>
+.event .title {
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+.event .content {
+  font-size: 12px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue
new file mode 100644
index 0000000000..ffb74e53d7
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue
@@ -0,0 +1,75 @@
+<template>
+  <tiny-calendar-view :events="eventslist" mode="timeline" :modes="[]" :year="2023" :month="5" :day-times="[10, 20]">
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([
+  {
+    title: '前端周会1',
+    start: '2023-05-15 8:30:00',
+    end: '2023-05-15 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2',
+    start: '2023-05-15 10:00:00',
+    end: '2023-05-15 12:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  },
+  {
+    title: '前端周会2-1',
+    start: '2023-05-15 13:00:00',
+    end: '2023-05-15 15:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'red'
+  },
+  {
+    title: '前端周会3',
+    start: '2023-05-16 9:00:00',
+    end: '2023-05-16 10:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'yellow'
+  },
+  {
+    title: '前端周会4',
+    start: '2023-05-16 11:00:00',
+    end: '2023-05-16 14:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'purple'
+  },
+  {
+    title: '前端周会5',
+    start: '2023-05-25 8:00:00',
+    end: '2023-05-25 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'cyan'
+  },
+  {
+    title: '前端周会6',
+    start: '2023-05-26 8:00:00',
+    end: '2023-05-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会7',
+    start: '2023-05-27 8:30:00',
+    end: '2023-05-27 9:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '节假日25-28',
+    start: '2023-05-25 10:30:00',
+    end: '2023-05-28 03:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue
new file mode 100644
index 0000000000..09ad9dc94d
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue
@@ -0,0 +1,137 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5">
+    <template #timeline1="{ slotScope }">
+      <div
+        class="text-color-success bg-color-success-subtler border-l-2 border-color-success mt-10"
+        v-for="(event, index) in slotScope.events"
+        :key="index"
+      >
+        <p class="text-sm mb-1">{{ event.title }}</p>
+        <p class="text-xs">{{ event.content }}</p>
+      </div>
+    </template>
+    <template #timeline2="{ slotScope }">
+      <div
+        class="text-color-success bg-color-success-subtler border-l-2 border-color-success mt-10"
+        v-for="(event, index) in slotScope.events"
+        :key="index"
+      >
+        <p class="text-sm mb-1">{{ event.title }}</p>
+        <p class="text-xs">{{ event.content }}</p>
+      </div>
+    </template>
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([
+  {
+    title: '前端周会1',
+    start: '2023-05-15 8:30:00',
+    end: '2023-05-15 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2',
+    start: '2023-05-15 10:00:00',
+    end: '2023-05-15 12:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  },
+  {
+    title: '前端周会2-1',
+    start: '2023-05-15 13:00:00',
+    end: '2023-05-15 15:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'red'
+  },
+  {
+    title: '前端周会3',
+    start: '2023-05-16 9:00:00',
+    end: '2023-05-16 10:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'yellow'
+  },
+  {
+    title: '前端周会4',
+    start: '2023-05-16 11:00:00',
+    end: '2023-05-16 14:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'purple'
+  },
+  {
+    title: '前端周会5',
+    start: '2023-05-25 8:00:00',
+    end: '2023-05-25 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'cyan'
+  },
+  {
+    title: '前端周会6',
+    start: '2023-05-26 8:00:00',
+    end: '2023-05-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会6-1',
+    start: '2023-05-26 12:00:00',
+    end: '2023-05-26 13:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'cyan'
+  },
+  {
+    title: '前端周会7',
+    start: '2023-05-27 8:30:00',
+    end: '2023-05-27 9:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '节假日25-28',
+    start: '2023-05-25 10:30:00',
+    end: '2023-05-28 03:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  },
+  {
+    title: '前端周会8',
+    start: '2023-06-26 8:00:00',
+    end: '2023-06-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会9',
+    start: '2023-07-26 8:00:00',
+    end: '2023-07-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会10',
+    start: '2023-08-26 8:00:00',
+    end: '2023-08-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会11',
+    start: '2023-09-26 8:00:00',
+    end: '2023-09-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会12',
+    start: '2023-10-26 8:00:00',
+    end: '2023-10-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue
new file mode 100644
index 0000000000..7264fddea3
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue
@@ -0,0 +1,11 @@
+<template>
+  <tiny-calendar-view>
+    <template #tool>
+      <p>此处为自定义工具栏插槽</p>
+    </template>
+  </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/custom-day-bg-color-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color-composition-api.vue
new file mode 100644
index 0000000000..75dec2bc13
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color-composition-api.vue
@@ -0,0 +1,18 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5" :set-day-bg-color="setDayBgColor">
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([])
+
+const setDayBgColor = (date) => {
+  if (date.split('-')[2] === '10') {
+    return 'red'
+  }
+  return ''
+}
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-header-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/custom-header-composition-api.vue
new file mode 100644
index 0000000000..616f1c59ae
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/custom-header-composition-api.vue
@@ -0,0 +1,78 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5">
+    <template #header="{ slotScope }">
+      <p>{{ slotScope.date }} {{ slotScope.weekDay }}</p>
+    </template>
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([
+  {
+    title: '前端周会1',
+    start: '2023-05-15 8:00:00',
+    end: '2023-05-15 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2',
+    start: '2023-05-15 10:00:00',
+    end: '2023-05-15 12:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2-1',
+    start: '2023-05-15 13:00:00',
+    end: '2023-05-15 15:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会3',
+    start: '2023-05-16 9:00:00',
+    end: '2023-05-16 10:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会4',
+    start: '2023-05-16 11:00:00',
+    end: '2023-05-16 14:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会5',
+    start: '2023-05-25 8:00:00',
+    end: '2023-05-25 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会6',
+    start: '2023-05-26 8:00:00',
+    end: '2023-05-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会7',
+    start: '2023-05-27 8:30:00',
+    end: '2023-05-27 9:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '节假日25-28',
+    start: '2023-05-25 10:30:00',
+    end: '2023-05-28 03:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  }
+])
+</script>
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
new file mode 100644
index 0000000000..8907042843
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/hide-mode-composition-api.vue
@@ -0,0 +1,7 @@
+<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/mode-combination-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/mode-combination-composition-api.vue
new file mode 100644
index 0000000000..e35cc7c15b
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/mode-combination-composition-api.vue
@@ -0,0 +1,7 @@
+<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/multi-select-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
new file mode 100644
index 0000000000..44521d75dd
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
@@ -0,0 +1,23 @@
+<template>
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="5"
+    :multi-select="true"
+    mode="month"
+    :modes="[]"
+    @selected-date-change="selectedDateChange"
+  >
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView, Modal } from '@opentiny/vue'
+
+const eventslist = ref([])
+
+const selectedDateChange = (date) => {
+  Modal.message(`当前选择${JSON.stringify(date)}`)
+}
+</script>
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
new file mode 100644
index 0000000000..471b9af18e
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
@@ -0,0 +1,64 @@
+<template>
+  <tiny-calendar-view
+    ref="calendar"
+    :multi-select="true"
+    :year="2023"
+    :month="5"
+    :modes="[]"
+    :set-day-bg-color="setDayBgColor"
+    @selected-date-change="selectedDateChange"
+  >
+    <template #tool>
+      <tiny-button type="primary" @click="setDays('workingDays')" class="mr-2">工作日</tiny-button>
+      <tiny-button type="success" @click="setDays('offDays')" class="mr-2">休息日</tiny-button>
+      <tiny-button type="warning" @click="setDays('holidays')">节假日</tiny-button>
+    </template>
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  CalendarView as TinyCalendarView,
+  Button as TinyButton,
+  Modal
+} from '@opentiny/vue'
+
+const workingDays = ref([])
+const offDays = ref([])
+const holidays = ref([])
+const selectedDate = ref([])
+
+const map = {
+  workingDays,
+  offDays,
+  holidays
+}
+
+const setDays = (type) => {
+  if (!selectedDate.value.length) {
+    Modal.message('请选择日期')
+    return
+  }
+  map[type].value.push(...selectedDate.value)
+  selectedDate.value = []
+}
+
+const setDayBgColor = (date) => {
+  if (workingDays.value.includes(date)) {
+    return 'blue'
+  }
+  if (offDays.value.includes(date)) {
+    return 'green'
+  }
+  if (holidays.value.includes(date)) {
+    return 'yellow'
+  }
+
+  return ''
+}
+
+const selectedDateChange = (date) => {
+  selectedDate.value = date
+}
+</script>
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 cee409e974..5fab61d693 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
@@ -39,7 +39,6 @@ export default {
         return
       }
       this[type].push(...this.selectedDate)
-      this.$refs.calendar.$children[0].state.selectedDates = []
       this.selectedDate = []
     },
     setDayBgColor(date) {
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 db2e829875..4ef18b60db 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
@@ -15,9 +15,9 @@ export default {
       'demoId': 'calendar-mode',
       'name': { 'zh-CN': '显示模式', 'en-US': 'Display mode' },
       'desc': {
-        'zh-CN': '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 year、month。</p>\n',
+        'zh-CN': '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 <code>month</code> / <code>timeline</code> / <code>schedule</code>。</p>\n',
         'en-US':
-          '<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are year and month. </p>\n'
+          '<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are <code>month</code> / <code>timeline</code> / <code>schedule</code>. </p>\n'
       },
       'codeFiles': ['calendar-mode.vue']
     },
@@ -49,7 +49,7 @@ export default {
       'codeFiles': ['calendar-timeline-slot.vue']
     },
     {
-      'demoId': 'calendar-timeline-rang',
+      'demoId': 'calendar-timeline-range',
       'name': { 'zh-CN': '时间线范围配置', 'en-US': '' },
       'desc': {
         'zh-CN': '<p>通过dayTimes属性配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。</p>\n',
@@ -137,7 +137,7 @@ export default {
             'zh-CN': '配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。',
             'en-US': ''
           },
-          'demoId': 'basic-usage'
+          'demoId': 'calendar-timeline-range'
         },
         {
           'name': 'disabled',
@@ -167,7 +167,7 @@ export default {
             'zh-CN': '日历高度',
             'en-US': ''
           },
-          'demoId': 'basic-usage'
+          'demoId': ''
         },
         {
           'name': 'mark-color',
@@ -275,7 +275,7 @@ export default {
             'zh-CN': '新增日程按钮点击事件',
             'en-US': ''
           },
-          'demoId': 'calendar-event'
+          'demoId': 'calendar-schedule-slot'
         },
         {
           'name': 'next-week-click',
@@ -299,7 +299,7 @@ export default {
             'zh-CN': '选中日期改变事件',
             'en-US': ''
           },
-          'demoId': 'calendar-event'
+          'demoId': 'multi-select'
         },
         {
           'name': 'week-change',