日程安排组件DHTMLX Scheduler v7.0新版亮点 - 拥有多种全新的主题

// 引入 DHTMLX Scheduler 组件
import Scheduler from "dhtmlx-scheduler";
 
// 创建 Scheduler 实例并配置
var scheduler = new Scheduler({
    container: "scheduler", // 指定 Scheduler 挂载的 DOM 容器
    theme: "material", // 设置主题为 "material"
    date: new Date(), // 设置当前日期
    start_date: "08:00", // 设置每天开始时间
    end_date: "24:00" // 设置每天结束时间
    // 其他配置...
});
 
// 配置数据源，这里以模拟数据源为例
scheduler.parse([
    { id: 1, text: "会议", start_date: "2023-03-06 09:00", end_date: "2023-03-06 11:00" }
    // 其他事件数据...
], "json");
 
// 初始化 Scheduler
scheduler.init();
 
// 在网页中添加 Scheduler 容器
document.body.innerHTML += '<div id="scheduler"></div>';

这段代码演示了如何创建一个 DHTMLX Scheduler 的实例，并设置了主题、当前日期、开始和结束时间，以及如何配置数据源并初始化 Scheduler。最后，它在网页的 body 中添加了用于挂载 Scheduler 的容器。这是一个基本的入门示例，展示了如何开始使用 DHTMLX Scheduler。