DHTMLX JS 預約日歷小部件旨在幫助開發(fā)團隊構(gòu)建功能豐富的自定義預約系統(tǒng)，方便用戶在網(wǎng)絡(luò)上進行預約。

它更強大的地方在于它與DHTMLX Scheduler的無縫集成，使開發(fā)人員能夠構(gòu)建更先進、功能更豐富的調(diào)度解決方案。在本指南中，我們將引導您完成在前端整合這兩個組件的過程。

DHTMLX Scheduler 最新版下載

使用 DHTMLX 預訂和調(diào)度程序組件的示例

很難想象現(xiàn)代酒店、醫(yī)療診所或美容院會缺少可靠的預訂系統(tǒng)。這類工具能夠幫助客戶輕松便捷地在線預約，從而簡化運營流程。

找到一個滿足特定業(yè)務模式所有技術(shù)要求和功能需求的現(xiàn)成解決方案并非易事。而這正是 DHTMLX Booking and Scheduler 的優(yōu)勢所在。使用這些完全兼容的 JavaScript UI 組件，開發(fā)團隊可以構(gòu)建符合特定需求的定制預約安排解決方案，并節(jié)省時間和精力。

下面，我們將展示了如何在醫(yī)療中心的單一解決方案中將 DHTMLX Booking與Scheduler相結(jié)合。

該演示包括三個主要部分——醫(yī)生安排、預約和客戶預約。

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

1. 調(diào)度程序的時間線視圖使用單個和重復事件（醫(yī)生時間表）顯示醫(yī)生的可用時間段。
2. 預訂小部件根據(jù)調(diào)度程序數(shù)據(jù)（事件）生成可用的時間段。
3. 預留的時間段根據(jù)調(diào)度程序（客戶預留）顯示在輔助部分中。

這種集成中最棘手的部分是將調(diào)度程序事件轉(zhuǎn)換為預訂時段，這發(fā)生在服務器端。

在本文中，您將學習如何配置這兩個 DHTMLX 組件，從而為實現(xiàn)服務器端的主要目標做好準備。

在前端配置調(diào)度程序和預訂組件

在深入研究我們演示中實現(xiàn)的所有三個部分的配置特性之前，我們想澄清與時間段（即可預訂的時間單位）、重復和時間戳相關(guān)的幾個重要細節(jié)。

在 DHTMLX Booking 中處理時間段有兩種方法：

1. 通過數(shù)據(jù)屬性的availableSlots參數(shù)顯示僅具有可用時間段的時間表（適用于沒有重復的情況）。
2. 使用slot數(shù)組和data屬性的usedSlots參數(shù)，顯示包含重復事件/重復模式以及已預留時間段的時間表。我們的集成演示中就采用了這種方法。

由于預訂小部件目前僅支持每周重復事件，因此有必要在其配置中排除 Scheduler 中可用的其他重復選項。

最后，我們必須指出，Booking 使用的是本地時區(qū)的時間戳。處理全球時間戳時，需要在將這些時間戳發(fā)送給 Booking 之前進行相應的轉(zhuǎn)換（反之亦然），然后再保存數(shù)據(jù)。轉(zhuǎn)換說明請參閱此頁面。

讓我們回顧一下如何分別配置每個部分并強調(diào)這個過程的主要方面。

醫(yī)生排程部分

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");

首先，你需要加載醫(yī)生的日程安排。之后，初始化并綁定 Scheduler 實例以便與后端集成，所有數(shù)據(jù)都將存儲在后端：

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

由于“預訂”小部件既可以適用于每周計劃，也可以適用于任意日期，因此您需要調(diào)整 Scheduler 以創(chuàng)建重復的每周事件。為此，您可以通過`schedulerWidget.form_blocks.recurring.render`設(shè)置一個自定義表單來編輯重復事件：

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

除了時間線視圖和事件循環(huán)之外，此部分的配置還包括其他擴展（插件），例如迷你日歷和工具提示。

使用 Scheduler API 中提供的模板，您可以更改時間線元素的外觀、指定過去事件的顯示以及在事件欄和工具提示中添加自定義內(nèi)容。

預訂部分

您需要使用我們的 JavaScript 預訂小部件來添加此部分。它提供了大部分開箱即用的功能，因此您只需初始化小部件并同步數(shù)據(jù)即可。

將所有全局時間戳轉(zhuǎn)換為本地時間戳后，初始化預訂小部件并從后端加載醫(yī)生的數(shù)據(jù)及其時間表和已預訂的時段。

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 });
   });

您需要創(chuàng)建一個處理時間段預訂的處理程序，并將本地時間戳轉(zhuǎn)換為全局時間戳。該處理程序向服務器發(fā)送 POST 請求，數(shù)據(jù)保存在“客戶預訂”部分顯示數(shù)據(jù)時使用的同一集合中：

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 部分類似，但配置本身不同。

對于本節(jié)，您將使用周單位設(shè)置單位視圖：

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");

首先，你需要獲取醫(yī)生和預約（即客戶預約）的數(shù)據(jù)。作為準備步驟，你需要將時間轉(zhuǎn)換為當?shù)貢r區(qū)。

要從后端加載此數(shù)據(jù)，您需要以下代碼：

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);
});

此部分的配置包括單位視圖、只讀模式、迷你日歷（日期選擇器）以及包含事件詳情的彈出窗口（快速信息）。除此之外，我們還為快速信息窗口和單位視圖中的垂直文本顯示添加了一些自定義功能。

就是這樣。這些是實現(xiàn)預訂解決方案前端部分所需的主要步驟，就像我們在演示中使用 DHTMLX 組件一樣。

總結(jié)

如您所見，DHTMLX 產(chǎn)品支持構(gòu)建功能豐富的預訂系統(tǒng)，從而簡化針對不同行業(yè)的預約安排。Scheduler 組件豐富的功能（可自定義的日歷視圖、重復事件等）與 Booking 小部件現(xiàn)成的預訂管理 UI 相結(jié)合，為您提供了構(gòu)建現(xiàn)代化 Web 預訂解決方案所需的一切。

關(guān)于慧都科技：

慧都科技是專注軟件工程、智能制造、石油工程三大行業(yè)的數(shù)字化解決方案服務商。在軟件工程領(lǐng)域，我們提供開發(fā)控件、研發(fā)管理、代碼開發(fā)、部署運維等軟件開發(fā)全鏈路所需的產(chǎn)品，提供正版授權(quán)采購、技術(shù)選型、個性化維保等服務，幫助客戶實現(xiàn)技術(shù)合規(guī)、降本增效與風險可控。慧都科技DHTMLX在中國的官方授權(quán)代理商，提供DHTMLX系列產(chǎn)品免費試用，咨詢，正版銷售等于一體的專業(yè)化服務。DHTMLX專注于JavaScript和HTML5 UI小部件和庫，以幫助開發(fā)人員更快地構(gòu)建功能豐富的、交互式的Web界面。 遵循現(xiàn)代網(wǎng)絡(luò)開發(fā)的標準和做法，DHTMLX提供針對桌面和移動設(shè)備定制的優(yōu)秀Web應用程序框架。

下載|體驗更多DHTMLX，請咨詢，或撥打產(chǎn)品熱線：023-68661681