Skip to content

Scheduler 日程调度 ​

月视图日程组件:日格内渲染事件芯片(标题 + 色条),events 读/写通道 + addEvent / updateEvent / removeEvent CRUD 方法;点事件芯片派发 oas-event-click、点日格派发 oas-day-click(宿主接编辑器),数据经 CRUD 方法变更时派发 oas-events-change(外部 setAttribute('events', …) 写入不派发)。

基础用法 ​

周起始与本地化(first-day-of-week + locale)

月视图 + 事件芯片(标题/色条/+N 合并)

周 / 日视图 ​

周视图(时刻表 + 定时事件块;全天行进顶部)

日视图(单列时刻表)+ 视图切换 oas-view-change

周/日视图为时刻表(start-hour / end-hour 限幅,默认 8–20 点):带 start/end 的事件按时间绝对定位成块,无 start 的事件进顶部全天行;视图按钮切换派发 oas-view-change。事件块支持拖拽移动(拖到目标列/时刻改 date + start,保持时长)与底缘拖拽缩放(改 end,15 分钟步进),落定回写并派发 oas-events-change。

重复规则与提醒 ​

重复规则(RRULE 子集:daily/weekly/monthly + interval + until)

repeat 按 freq × interval 从 date 起展开(daily 按天数间隔、weekly 按周、monthly 按同日),until 截止(含当日);el.events 仍只读原始条目(展开只发生在渲染层)。

提醒(remind 分钟,到点派发 oas-remind)

带 remind(分钟)的事件,组件在「start − remind 分钟」到点派发 oas-remind(detail: { id, event };无 start 按当日 00:00 计)。过期/已删/断开连接均不再派发。

时区与日程视图 ​

日程视图(agenda:锚点起 28 天时序清单)

view="agenda" 从锚点起 28 天按日分组列出事件(重复事件已展开):定时事件带 start–end 时间、无 start 标「全天」;点事件行派发 oas-event-click、点日头派发 oas-day-click。

时区(timezone:影响标题/列头与「今天」标记)

timezone 接受 IANA 时区名(如 Asia/Shanghai / America/New_York / UTC),影响标题/列头的日期格式化与「今天」标记(经 Intl timeZone);非法时区回落本地。

CRUD(方法通道) ​

addEvent / updateEvent / removeEvent + oas-events-change 反馈

新增「评审会」改名首条删除首条

事件反馈(点击联动) ​

oas-event-click / oas-day-click 宿主联动

点击事件芯片派发 oas-event-click(detail: { id, event },且不触发日格点击);点空白日格派发 oas-day-click(detail: { date })——宿主据此打开编辑器/表单,组件不内置编辑表单。

API ​

oas-scheduler ​

属性 ​

属性说明类型默认值
end-hour时间轴结束小时(>start-hour 且 <=24,默认 20)string20
events日程事件(JSON):[{ id?, date: YYYY-MM-DD, title, color?, start?, end? }]——日格渲染事件芯片(标题+色条),>2 合并 +N 条SchedulerEvent[][]
first-day-of-week周起始日(0-6);缺省按 locale 推导string—
locale本地化(覆盖 config-provider 注入与全局 locale)string—
page-show-date面板月锚点(受控):yyyy-MM-dd,变化时重锚定显示月份string—
start-hour时间轴起始小时(0-23,默认 8)string8
timezone时区(IANA,如 Asia/Shanghai;空串=本地):影响标题/列头日期格式化与「今天」标记(经 Intl timeZone);非法时区回落本地string—
view视图:month(默认)/ week / day / agenda;周/日视图为时刻表 + 事件块定位,无 start 的事件进全天行;agenda 为 28 天时序清单SchedulerViewmonth

Property(JS property;是否写回 attribute 见各行说明) ​

Property说明类型默认值
events日程事件(SchedulerEvent[]):el.events 读(含自动 id 的拷贝);el.events = [...] 写(同步 events 属性 + 重渲染 + 派发 oas-events-change)SchedulerEvent[][]

事件 ​

事件说明
oas-day-click点击空白日格时派发,detail: { date }——宿主接新增表单
oas-event-click点击事件芯片时派发,detail: { id, event }(不触发日格点击)
oas-events-changeevents 数据变化(set/addEvent/updateEvent/removeEvent)时派发,detail:
oas-remind事件提醒到点时派发,detail: { id, event }(start - remind 分钟,组件内置定时器)
oas-view-change视图切换(month/week/day/agenda)时派发,detail: { view };属性首次吸收不派发

基于 MIT OR Apache-2.0 双许可发布