docs(calendar-view): add calendar-view composition api demos

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>

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>

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>

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>

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>

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>

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>