@opentiny/vue-docs 2.2.11 → 2.2.14

package/demos/mobile-first/app/button/webdoc/button.js

@@ -3,16 +3,16 @@ export default {
   owner: '',
   demos: [
     {
-      demoId: 'click',
+      demoId: 'basic-usage',
       name: {
-        'zh-CN': '默认按钮',
+        'zh-CN': '基本用法',
         'en-US': 'basic usage'
       },
       desc: {
-        'zh-CN': '<p>按钮的单击事件，该示例中单击按钮将会出现提示信息</p>',
-        'en-US': '<p>Click event of a button. In this example, a message is displayed when a button is clicked.</p>'
+        'zh-CN': '<p></p>',
+        'en-US': '<p></p>'
       },
-      codeFiles: ['click.vue']
+      codeFiles: ['basic-usage.vue']
     },
     {
       demoId: 'text',
@@ -121,12 +121,12 @@ export default {
     {
       demoId: 'click',
       name: {
-        'zh-CN': '事件',
-        'en-US': 'events'
+        'zh-CN': '点击事件',
+        'en-US': 'basic usage'
       },
       desc: {
-        'zh-CN': '<p>按钮的单击事件，该示例中单击按钮将会出现提示信息。<p>',
-        'en-US': '<p>Click event of a button. In this example, a message is displayed when a button is clicked</p>'
+        'zh-CN': '<p>按钮的单击事件，该示例中单击按钮将会出现提示信息</p>',
+        'en-US': '<p>Click event of a button. In this example, a message is displayed when a button is clicked.</p>'
       },
       codeFiles: ['click.vue']
     },
@@ -202,40 +202,5 @@ export default {
       },
       codeFiles: ['round.vue']
     }
-  ],
-  apis: [
-    {
-      'name': 'Button',
-      'type': 'component',
-      'props': [
-        {
-          'name': 'banner ',
-          'type': 'Boolean',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '设置通栏按钮', 'en-US': 'Setting the bar button' },
-          'demoId': 'banner'
-        },
-        {
-          'name': 'custom-class',
-          'type': 'String',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '设置 custom-class 属性定制按钮样式',
-            'en-US': 'Set the custom-class attribute to customize the button style'
-          },
-          'demoId': 'button-class'
-        },
-        {
-          'name': 'href',
-          'type': 'String',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '通过设置 href 属性可跳转到指定页面',
-            'en-US': 'Set the href attribute to jump to a specified page'
-          },
-          'demoId': 'link'
-        }
-      ]
-    }
   ]
 }

package/demos/mobile-first/app/button-group/webdoc/button-group.js

@@ -53,6 +53,5 @@ export default {
       },
       codeFiles: ['enumeration.vue']
     }
-  ],
-  apis: []
+  ]
 }

package/demos/mobile-first/app/calendar-bar/render-today.vue

@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      value: '2022-12-18',
+      value: new Date().toLocaleDateString(),
       config: {
         renderItem: this.renderItem
       }

package/demos/mobile-first/app/calendar-bar/webdoc/calendar-bar.js

@@ -36,14 +36,10 @@ export default {
         'en-US': 'Date Marker'
       },
       desc: {
-        'zh-CN': `<p>使用<code> config.mark</code> 配置一个方法，用于判断参数日期是否存在标记。<br>
-          此方法返回空字符串表示不存在标记，返回非空字符串表示存在标记，且标记内容就是该字符串。 <br>
-          使用<code> config.markBackgroundColorClass</code> 配置标记的颜色类名。 <br>
-          使用<code> config.showMarkMessage</code> 配置是否开启标记<code> title</code> 提示，默认值为<code> false</code>。</p>`,
-        'en-US': `<p>Use <code> config.mark</code> to configure a method to determine whether the parameter date has a mark.<br>
-        This method returns an empty string, indicating that the tag does not exist. A non-empty string is returned, indicating that the tag exists and the tag content is the string.<br>
-        Use <code> config.markBackgroundColorClass</code> to configure the color class name of the tag.<br>
-        Use <code> config.showMarkMessage</code> to configure whether to enable the flag <code> title</code> prompt. The default value is <code> false</code>.</p>`
+        'zh-CN':
+          '<p>使用<code> config.mark</code> 配置一个方法，用于判断参数日期是否存在标记。<br>\n          此方法返回空字符串表示不存在标记，返回非空字符串表示存在标记，且标记内容就是该字符串。 <br>\n          使用<code> config.markBackgroundColorClass</code> 配置标记的颜色类名。 <br>\n          使用<code> config.showMarkMessage</code> 配置是否开启标记<code> title</code> 提示，默认值为<code> false</code>。</p>',
+        'en-US':
+          '<p>Use <code> config.mark</code> to configure a method to determine whether the parameter date has a mark.<br>\n        This method returns an empty string, indicating that the tag does not exist. A non-empty string is returned, indicating that the tag exists and the tag content is the string.<br>\n        Use <code> config.markBackgroundColorClass</code> to configure the color class name of the tag.<br>\n        Use <code> config.showMarkMessage</code> to configure whether to enable the flag <code> title</code> prompt. The default value is <code> false</code>.</p>'
       },
       codeFiles: ['marked.vue']
     },
@@ -54,12 +50,10 @@ export default {
         'en-US': 'Current Date'
       },
       desc: {
-        'zh-CN': `<p>用户传入的日期为<code>  当前日期</code> 。<br>
-           使用 <code> config.currentColorClass</code>  配置<code>  当前日期</code>  的字体颜色类名；<br>
-           使用<code>  config.currentBackgroundColorClass</code>  配置<code>  当前日期</code>  的背景颜色类名。<p>`,
-        'en-US': `<p><p>The date transferred by the user is <code>Current date</code>.<br>
-        Use <code> config.currentColorClass</code> to configure the font color class name of <code>Current Date</code>.<br>
-        Use <code> config.currentBackgroundColorClass</code> to configure the background color class name of <code>current date</code>.</p>`
+        'zh-CN':
+          '<p>用户传入的日期为<code>  当前日期</code> 。<br>\n           使用 <code> config.currentColorClass</code>  配置<code>  当前日期</code>  的字体颜色类名；<br>\n           使用<code>  config.currentBackgroundColorClass</code>  配置<code>  当前日期</code>  的背景颜色类名。<p>',
+        'en-US':
+          '<p><p>The date transferred by the user is <code>Current date</code>.<br>\n        Use <code> config.currentColorClass</code> to configure the font color class name of <code>Current Date</code>.<br>\n        Use <code> config.currentBackgroundColorClass</code> to configure the background color class name of <code>current date</code>.</p>'
       },
       codeFiles: ['render-current.vue']
     },
@@ -97,14 +91,10 @@ export default {
         'en-US': 'Workdays'
       },
       desc: {
-        'zh-CN': `<p>用户传入的日期为<code>  当前日期</code>，当前日期所在月份为<code>  当前月份</code>，当前月份周六周日为 周末，非周六周日为 工作日。<br>
-           使用<code>  config.workday </code>配置一个方法，用于判断 工作日 是否作为真正的工作日；<br>
-           使用<code>  config.holiday</code> 配置一个方法，用于判断 周末 是否作为真正的周末； <br>
-           使用<code>  config.workdayColorClass 和 config.holidayColorClass</code> 配置工作日和周末的字体颜色类。<p>`,
-        'en-US': `<p>The date transferred by the user is <code>Current Date</code>, and the month to which the current date belongs is <code>Current Month</code>. Saturday and Sunday of the current month are weekends, and non-Saturday and Sunday are workdays.<br>
-        Use <code> config.workday </code> to configure a method to determine whether a workday is a real workday.<br>
-        Use <code> config.holiday</code> to configure a method to determine whether a weekend is a real weekend.<br>
-        Use <code> config.workdayColorClass and config.holidayColorClass</code> to configure the font color classes for weekdays and weekends.</p>`
+        'zh-CN':
+          '<p>用户传入的日期为<code>  当前日期</code>，当前日期所在月份为<code>  当前月份</code>，当前月份周六周日为 周末，非周六周日为 工作日。<br>\n           使用<code>  config.workday </code>配置一个方法，用于判断 工作日 是否作为真正的工作日；<br>\n           使用<code>  config.holiday</code> 配置一个方法，用于判断 周末 是否作为真正的周末； <br>\n           使用<code>  config.workdayColorClass 和 config.holidayColorClass</code> 配置工作日和周末的字体颜色类。<p>',
+        'en-US':
+          '<p>The date transferred by the user is <code>Current Date</code>, and the month to which the current date belongs is <code>Current Month</code>. Saturday and Sunday of the current month are weekends, and non-Saturday and Sunday are workdays.<br>\n        Use <code> config.workday </code> to configure a method to determine whether a workday is a real workday.<br>\n        Use <code> config.holiday</code> to configure a method to determine whether a weekend is a real weekend.<br>\n        Use <code> config.workdayColorClass and config.holidayColorClass</code> to configure the font color classes for weekdays and weekends.</p>'
       },
       codeFiles: ['workday.vue']
     },
@@ -115,7 +105,7 @@ export default {
         'en-US': 'Expand Collapse Events'
       },
       desc: {
-        'zh-CN': `<p>日历栏展开或收起时触发的事件；事件参数为 true 时代表展开状态，反之为收起状态。<p>`,
+        'zh-CN': '<p>日历栏展开或收起时触发的事件；事件参数为 true 时代表展开状态，反之为收起状态。<p>',
         'en-US':
           '<p>Event triggered when the calendar bar is expanded or collapsed; If the event parameter is set to true, the event is expanded. Otherwise, the event is collapsed.</p>'
       },
@@ -128,52 +118,12 @@ export default {
         'en-US': 'Year and month selected location'
       },
       desc: {
-        'zh-CN': `<p>使用 cascaderPosition 属性可以改变年月选择的位置；可选值为：<code>start | center | end</code> 默认值为<code>center</code><p>`,
+        'zh-CN':
+          '<p>使用 cascaderPosition 属性可以改变年月选择的位置；可选值为：<code>start | center | end</code> 默认值为<code>center</code><p>',
         'en-US':
           '<p>You can use the cascaderPosition attribute to change the location of the year and month. The options are as follows: <code>start | center | end</code>The default value is <code>center</code></p>'
       },
       codeFiles: ['cascader-position.vue']
     }
-  ],
-  apis: [
-    {
-      'name': 'calendarBar',
-      'type': 'component',
-      'props': [
-        {
-          'name': 'cascaderPosition',
-          'type': 'Object',
-          'defaultValue': '{}',
-          'desc': { 'zh-CN': '改变年月选择的位置', 'en-US': 'Change the location of the year and month selection' },
-          'demoId': 'cascader-position'
-        },
-        {
-          'name': 'config',
-          'type': 'Object',
-          'defaultValue': '{}',
-          'desc': { 'zh-CN': '传入用户日期配置信息', 'en-US': 'Transfer the user date configuration information.' },
-          'demoId': 'marked'
-        },
-        {
-          'name': 'v-model',
-          'type': 'String',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '数据绑定', 'en-US': 'Data Binding' },
-          'demoId': 'marked'
-        }
-      ],
-      'methods': [
-        {
-          'name': 'expand',
-          'type': '',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '日历栏展开或收起时触发的事件',
-            'en-US': 'Event triggered when the calendar bar expands or collapses'
-          },
-          'demoId': 'expand'
-        }
-      ]
-    }
   ]
 }

package/demos/mobile-first/app/calendar-view/basic-usage.vue

@@ -0,0 +1,82 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5"> </tiny-calendar-view>
+</template>
+
+<script>
+import { CalendarView } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarView: CalendarView
+  },
+  data() {
+    return {
+      eventslist: [
+        {
+          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>

package/demos/mobile-first/app/calendar-view/calendar-day-mark.vue

@@ -0,0 +1,31 @@
+<template>
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="5"
+    mode="timeline"
+    :show-mark="showMark"
+    mark-color="red"
+  >
+  </tiny-calendar-view>
+</template>
+
+<script>
+import { CalendarView } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarView: CalendarView
+  },
+  data() {
+    return {
+      eventslist: []
+    }
+  },
+  methods: {
+    showMark(date) {
+      return date.split('-')[2] < 10
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/calendar-view/calendar-disabled-day.vue

@@ -0,0 +1,23 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5" :disabled="disabled"> </tiny-calendar-view>
+</template>
+
+<script>
+import { CalendarView } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarView: CalendarView
+  },
+  data() {
+    return {
+      eventslist: []
+    }
+  },
+  methods: {
+    disabled(date) {
+      return date.split('-')[2] < 5
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/calendar-view/calendar-event.vue

@@ -0,0 +1,45 @@
+<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>
+import { CalendarView, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarView: CalendarView
+  },
+  data() {
+    return {
+      eventslist: []
+    }
+  },
+  methods: {
+    prevWeekClick(date) {
+      Modal.message({ message: `上一周按钮点击事件： ${date[0].value}`, status: 'info' })
+    },
+    nextWeekClick(date) {
+      Modal.message({ message: `下一周按钮点击事件： ${date[0].value}`, status: 'info' })
+    },
+    weekChange(weekDate) {
+      Modal.message({ message: `周改变事件： ${weekDate[0].value}`, status: 'info' })
+    },
+    yearChange(newVal, oldVal) {
+      Modal.message({ message: `年改变事件: ${newVal}年, ${oldVal}年`, status: 'info' })
+    },
+    monthChange(newVal, oldVal) {
+      Modal.message({ message: `月改变事件: ${newVal}月, ${oldVal}月`, status: 'info' })
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/calendar-view/calendar-mode.vue

@@ -0,0 +1,19 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  </tiny-calendar-view>
+</template>
+
+<script>
+import { CalendarView } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarView: CalendarView
+  },
+  data() {
+    return {
+      eventslist: []
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/calendar-view/calendar-schedule-slot.vue

@@ -0,0 +1,119 @@
+<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">
+        <p class="text-sm mb-1">{{ event.title }}</p>
+        <p class="text-xs">{{ event.content }}</p>
+      </div>
+    </template>
+    <template #weekday2="{ slotScope }">
+      <div 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>
+import { CalendarView } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarView: CalendarView
+  },
+  data() {
+    return {
+      eventslist: [
+        {
+          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'
+        }
+      ]
+    }
+  },
+  methods: {
+    showNewSchedule(date) {
+      return true
+    },
+    newSchedule(date) {
+      const event = {
+        title: '新增事件' + date,
+        start: date + ' 10:30:00',
+        end: date + ' 12:30:00',
+        content: '新增事件随机事件 新增事件随机事件 新增事件随机事件 新增事件随机事件 ',
+        theme: 'blue'
+      }
+
+      this.eventslist.push(event)
+    }
+  }
+}
+</script>

package/demos/mobile-first/app/calendar-view/calendar-timeline-range.vue

@@ -0,0 +1,83 @@
+<template>
+  <tiny-calendar-view :events="eventslist" mode="timeline" :modes="[]" :year="2023" :month="5" :day-times="[10, 20]">
+  </tiny-calendar-view>
+</template>
+
+<script>
+import { CalendarView } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCalendarView: CalendarView
+  },
+  data() {
+    return {
+      eventslist: [
+        {
+          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>