当前位置：首页 > news >正文

DHTMLX重磅发布React Scheduler组件，赋能日程管理开发！

news 2025/8/6 8:03:30

React开发者们的呼声，DHTMLX团队听到了！继DHTMLX React Gantt图表广受欢迎后，DHTMLX再次带来全新力作 —— DHTMLX React Scheduler正式发布！

该组件将成熟稳定的JavaScript Scheduler功能完美移植到React生态，为现代Web开发提供强大的日程排程能力，极大地提升项目开发效率与界面体验。本文将带您快速了解其核心能力与典型用法，助力您轻松构建专业级排程系统。

DHTMLX React Scheduler 试用下载

React Scheduler：为React而生的专业排程组件

DHTMLX React Scheduler基于原生JavaScript Scheduler构建，全面支持React 18及以上版本，完全遵循React开发范式，利用props与state实现数据驱动与交互响应，开发体验更自然、更高效。

安装简单，可通过npm快速引入使用：

import { useState } from 'react';
import ReactScheduler from "@dhx/react-scheduler";
import "@dhx/react-scheduler/dist/react-scheduler.css";export default function BasicScheduler() {const [events, setEvents] = useState(demoData.events);return (<ReactSchedulerevents={events}config={{ first_hour: 8, last_hour: 20, time_step: 15 }}date={new Date("2025-08-15")}view={"month"}/>);
};

此外，Scheduler组件原生支持React组件自定义，可轻松实现事件样式、编辑弹窗（Lightbox）等个性化设计，满足各种业务需求。

功能全面，场景复杂也不怕

DHTMLX React Scheduler首发即配备丰富功能，适配多种复杂场景：

视图支持：基础视图（月/周/日）+高级视图（Timeline、资源视图）
事件管理：新增/修改/删除事件，实时渲染更新
时间控制：可高亮/屏蔽时间段，适应排班、会议等场景
事件分类与样式定制：支持事件样式模板、颜色主题切换、暗黑模式等

示例：通过CSS变量快速修改主题样式

:root {--dhx-scheduler-event-background: #33B579;--dhx-scheduler-event-color: #FFFFFF;
}

支持TypeScript、Redux、Next.js等现代技术栈

DHTMLX React Scheduler充分考虑现代开发环境：

TypeScript 完全兼容：支持JSX/TSX，代码更安全、可维护性更高
集成 Redux：实现统一状态管理，支持多用户同步、撤销/重做等功能
兼容 SSR 框架：如Next.js、Remix，无需额外配置即可运行

示例：使用 Redux 处理事件变更

const dataBridge = {save: (entity, action, payload, id) => {switch (action) {case "update": dispatch(updateEvent(payload)); break;case "create": dispatch(createEvent(payload)); break;case "delete": dispatch(deleteEvent(id)); break;}},
};