Skip to content

Schedule ​

Schedule 把一组事件画成月历、周或日的时间格,或者按天排成列表。翻页、今天和视图切换都由头部插件负责,当前页的时刻完全由调用方保存。它是展示组件,不是日期选择器。属于 Lab,只通过 canary 标签发布。

导入 ​

ts
import {
  createEventFromISO,
  createScheduleDayView,
  createScheduleListView,
  createScheduleMonthlyView,
  createScheduleWeeklyView,
  Schedule,
  useSchedulePaginationPlugin,
  useScheduleViewSelectorPlugin,
} from '@astryx-vue/lab'

日期和事件 ​

date 是必填的毫秒时刻,表示当前要看的那一页。翻页时组件调用 onChangeDate,模板里也可以听 @change-date。同一次操作只会通知一次。新时刻保留原来的时分,只平移到上一页或下一页。

events 可以是数组,也可以是 (start, end) => Promise<事件[]>。异步函数收到的是当前页的起止毫秒。请求还没回来时格子是空的,标题旁边有加载指示。

createEventFromISO 看到 YYYY-MM-DD 会做成全天事件,看到带时间的字符串会做成时刻事件。持续满 24 小时的时刻事件画在全天行。

categories 用 label 对齐 event.category,决定颜色和读屏里的分类名。对不上、或者事件没有分类时,分类名是 Event,颜色是蓝色。

视图 ​

四种工厂都要保持同一个对象引用,不要在渲染时重新调用:

工厂范围
createScheduleMonthlyView含当月的整月格子,可设 weekStartsOn
createScheduleWeeklyView七天时间格,可设 weekStartsOn、minHour、maxHour、hourHeight
createScheduleDayView一天时间格,小时窗口同上
createScheduleListView从 date 起连续若干天,默认 7 天,只列出有事件的天、今天和区间第一天

月、周、日可以传 renderPopover。返回内容时,对应事件是按钮,点开这一视图里唯一的浮层;返回 null 时该事件只读。不传时整页只读。列表视图没有这个浮层。

插件 ​

不传 plugins 时只有分页:上一页、Today、下一页。传入数组会换掉这组默认按钮。useScheduleViewSelectorPlugin 放在末尾,按视图对象的引用判断当前选中项。

页眉上的区间标题固定是 2 级标题。headingLevel 只影响视图内部的小标题,默认 3。

按钮和浮层里的固定文案与上游一致,是英文,例如 Today、All day、Loading events。日期本身跟随当前 locale,并且按公历排。这里没有上游那套非公历历法。