组件/数据展示引入于 1.3.0

EScheduler 排程

import EUI 1.0

示例与代码

月视图与拖动

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EScheduler { height: 500 date: new Date(2026, 9, 15) width: Math.min(860, parent.width) events: [{ "key": "design", "title": qsTr("设计评审"), "start": new Date(2026, 9, 15, 9), "end": new Date(2026, 9, 15, 10) }, { "key": "release", "title": qsTr("发布"), "start": new Date(2026, 9, 16), "end": new Date(2026, 9, 18), "allDay": true, "color": "#67c23a" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

周视图

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EScheduler { height: 500 view: "week" date: new Date(2026, 9, 15) width: Math.min(860, parent.width) events: [{ "key": "design", "title": qsTr("设计评审"), "start": new Date(2026, 9, 15, 9), "end": new Date(2026, 9, 15, 10) }, { "key": "release", "title": qsTr("发布"), "start": new Date(2026, 9, 16), "end": new Date(2026, 9, 18), "allDay": true, "color": "#67c23a" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

日视图

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EScheduler { height: 500 view: "day" date: new Date(2026, 9, 15) width: Math.min(860, parent.width) events: [{ "key": "design", "title": qsTr("设计评审"), "start": new Date(2026, 9, 15, 9), "end": new Date(2026, 9, 15, 10) }, { "key": "release", "title": qsTr("发布"), "start": new Date(2026, 9, 16), "end": new Date(2026, 9, 18), "allDay": true, "color": "#67c23a" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

事件与空白时段回调

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EScheduler { height: 500 date: new Date(2026, 9, 15) width: Math.min(860, parent.width) events: [{ "key": "design", "title": qsTr("设计评审"), "start": new Date(2026, 9, 15, 9), "end": new Date(2026, 9, 15, 10) }, { "key": "release", "title": qsTr("发布"), "start": new Date(2026, 9, 16), "end": new Date(2026, 9, 18), "allDay": true, "color": "#67c23a" }] onEventClicked: function(event) { sampleFeedback.open(event.title) } onSlotClicked: function(date) { sampleFeedback.open(Qt.formatDate(date, "yyyy-MM-dd")) } EMessage { id: sampleFeedback type: EStyle.Info objectName: "sampleFeedback" } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

只读排程

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EScheduler { height: 500 readOnly: true date: new Date(2026, 9, 15) width: Math.min(860, parent.width) events: [{ "key": "design", "title": qsTr("设计评审"), "start": new Date(2026, 9, 15, 9), "end": new Date(2026, 9, 15, 10) }, { "key": "release", "title": qsTr("发布"), "start": new Date(2026, 9, 16), "end": new Date(2026, 9, 18), "allDay": true, "color": "#67c23a" }] }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

eventsvar

排程事件数组，每项包含唯一 key、title、start 和 end。

默认值[]

draggablebool

允许通过拖拽移动条目。

默认值true

readOnlybool

保持内容可见并禁止用户修改。

默认值false

viewstring

日期视图：day、week 或 month。

默认值"month"

datedate

当前显示的本地日期。

默认值new Date()

firstDayOfWeekint

每周第一天，0 为周日，1 为周一，范围 0 到 6。

默认值1

eventDelegateComponent

自定义排程事件内容，通过父级 eventData 读取数据。

默认值null

visibleDaysvar只读

当前视图中显示的本地日期数组。

默认值days()

errorStringstring只读

模型校验错误代码；有效时为空字符串。

默认值validate()

信号

签名作用

changed(var events)

日程数据变化时触发，events 为更新后的事件集合。

slotClicked(date date)

点击日程中的时间位置时触发，date 为该位置对应的日期时间。

eventClicked(var event)

点击日程事件时触发，event 为对应事件对象。

eventMoved(var event, date previousStart)

调整事件时间后触发，event 为更新后的事件，previousStart 为原开始时间。

方法

签名作用

navigate(delta)

将日程显示范围按 delta 向前或向后移动。

resizeEvent(key, end)

将 key 对应事件的结束时间改为 end。

validate()

校验当前数据；支持 callback 的组件会将校验结果交给回调。

moveEvent(key, start)

将 key 对应的事件移动到 start 指定的开始时间。