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

JavaScript UI 组件DHTMLX：如何进行集成 DHTMLX 预订和调度程序的前端设置

news 来源：原创 2025/4/20 2:05:11

DHTMLX JS 预约日历小部件旨在帮助开发团队构建功能丰富的自定义预约系统，方便用户在网络上进行预约。

它更强大的地方在于它与DHTMLX Scheduler的无缝集成，使开发人员能够构建更先进、功能更丰富的调度解决方案。在本指南中，我们将引导您完成在前端整合这两个组件的过程。

DHTMLX Scheduler 最新版下载

使用 DHTMLX 预订和调度程序组件的示例

很难想象现代酒店、医疗诊所或美容院会缺少可靠的预订系统。这类工具能够帮助客户轻松便捷地在线预约，从而简化运营流程。

找到一个满足特定业务模式所有技术要求和功能需求的现成解决方案并非易事。而这正是 DHTMLX Booking and Scheduler 的优势所在。使用这些完全兼容的 JavaScript UI 组件，开发团队可以构建符合特定需求的定制预约安排解决方案，并节省时间和精力。

下面，我们将展示了如何在医疗中心的单一解决方案中将 DHTMLX Booking与Scheduler相结合。

该演示包括三个主要部分——医生安排、预约和客户预约。

有必要提一下我们演示中每个部分使用的主要功能概念：

调度程序的时间线视图使用单个和重复事件（医生时间表）显示医生的可用时间段。
预订小部件根据调度程序数据（事件）生成可用的时间段。
预留的时间段根据调度程序（客户预留）显示在辅助部分中。

这种集成中最棘手的部分是将调度程序事件转换为预订时段，这发生在服务器端。

在本文中，您将学习如何配置这两个 DHTMLX 组件，从而为实现服务器端的主要目标做好准备。

在前端配置调度程序和预订组件

在深入研究我们演示中实现的所有三个部分的配置特性之前，我们想澄清与时间段（即可预订的时间单位）、重复和时间戳相关的几个重要细节。

在 DHTMLX Booking 中处理时间段有两种方法：

通过数据属性的availableSlots参数显示仅具有可用时间段的时间表（适用于没有重复的情况）。
使用slot数组和data属性的usedSlots参数，显示包含重复事件/重复模式以及已预留时间段的时间表。我们的集成演示中就采用了这种方法。

由于预订小部件目前仅支持每周重复事件，因此有必要在其配置中排除 Scheduler 中可用的其他重复选项。

最后，我们必须指出，Booking 使用的是本地时区的时间戳。处理全球时间戳时，需要在将这些时间戳发送给 Booking 之前进行相应的转换（反之亦然），然后再保存数据。转换说明请参阅此页面。

让我们回顾一下如何分别配置每个部分并强调这个过程的主要方面。

医生排程部分

首先，需要为“医生排班”部分创建一个单独的 Scheduler 实例，其中包含时间轴视图。具体操作如下：

if (schedulerWidget) schedulerWidget.destructor();
schedulerWidget = Scheduler.getSchedulerInstance();

schedulerWidget.plugins({
   timeline: true,
   daytimeline: true,
   recurring: true,
   tooltip: true,
   minical: true
});

schedulerWidget.createTimelineView({
   name: "timeline",
   ...
});

schedulerWidget.init("doctor_scheduler", utcDate, "timeline");

首先，你需要加载医生的日程安排。之后，初始化DataProcessor并绑定 Scheduler 实例以便与后端集成，所有数据都将存储在后端：

schedulerWidget.load(URL("/doctors/worktime"));
if (dp) dp.destructor();
dp = new scheduler.DataProcessor(URL("/doctors/worktime"));
dp.init(scheduler);

由于“预订”小部件既可以适用于每周计划，也可以适用于任意日期，因此您需要调整 Scheduler 以创建重复的每周事件。为此，您可以通过`schedulerWidget.form_blocks.recurring.render`设置一个自定义表单来编辑重复事件：

schedulerWidget.form_blocks.recurring.render = () => {
   return /* custom HTML for form */;
};

除了时间线视图和事件循环之外，此部分的配置还包括其他扩展（插件），例如迷你日历和工具提示。

使用 Scheduler API 中提供的模板，您可以更改时间线元素的外观、指定过去事件的显示以及在事件栏和工具提示中添加自定义内容。

预订部分

您需要使用我们的 JavaScript 预订小部件来添加此部分。它提供了大部分开箱即用的功能，因此您只需初始化小部件并同步数据即可。

将所有全局时间戳转换为本地时间戳后，初始化预订小部件并从后端加载医生的数据及其时间表和已预订的时段。

bookingWidget = new booking.Booking("#root", {
    start: utcDate(),
    end: utcDate(/*add 2 years*/),
})

fetch(URL("/units"))
   .then(res => res.json())
   .then(units => {
       // convert timestamps
       ...
       bookingWidget.setConfig({ data: units });
   });

您需要创建一个处理时间段预订的处理程序，并将本地时间戳转换为全局时间戳。该处理程序向服务器发送 POST 请求，数据保存在“客户预订”部分显示数据时使用的同一集合中：

bookingWidget.setConfirmHandler(event => {
    const { confirm, slot, data } = event;
    const info = { /*event data*/}; // convert timestamps

    fetch(URL("/doctors/reservations"), {
       method: "POST",
       body: JSON.stringify(info),
    }).then(response => {
        if (response.ok) confirm.done();
        else confirm.error();
    });
});

最后，我们可以进入客户预订部分。

客户预订部

客户预订是我们集成演示的辅助部分，旨在通过调度程序视图可视化预订的时间段。

它的配置与 Doctor Schedule 部分类似，但配置本身不同。

对于本节，您将使用周单位设置单位视图：

if (schedulerWidget) schedulerWidget.destructor();
schedulerWidget = Scheduler.getSchedulerInstance();

schedulerWidget.plugins({
   units: true,
   ...
});

schedulerWidget.createUnitsView({
   name: "week_unit",
   property: "doctor_id",
   list: doctors,
   days: 3,
});

schedulerWidget.init("client_scheduler", utcDate, "week_unit");

首先，你需要获取医生和预约（即客户预约）的数据。作为准备步骤，你需要将时间转换为当地时区。

要从后端加载此数据，您需要以下代码：

Promise.all([
   schedulerWidget.ajax.get(URL("/doctors")),
   schedulerWidget.ajax.get(URL("/doctors/reservations")),
]).then(([doctorsReq, eventsReq]) => {
   let events = JSON.parse(eventsReq.response);
   ...
   schedulerWidget.parse(events);
});

此部分的配置包括单位视图、只读模式、迷你日历（日期选择器）以及包含事件详情的弹出窗口（快速信息）。除此之外，我们还为快速信息窗口和单位视图中的垂直文本显示添加了一些自定义功能。

就是这样。这些是实现预订解决方案前端部分所需的主要步骤，就像我们在演示中使用 DHTMLX 组件一样。