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

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

DHTMLX Scheduler 最新版下載

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

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

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

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

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

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

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

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

在本文中，您將學(xué)習(xí)如何配置這兩個(gè) DHTMLX 組件，從而為實(shí)現(xiàn)服務(wù)器端的主要目標(biāo)做好準(zhǔn)備。

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

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

在 DHTMLX Booking 中處理時(shí)間段有兩種方法：

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

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

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

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

醫(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í)例以便與后端集成，所有數(shù)據(jù)都將存儲在后端：

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

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

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

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

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

預(yù)訂部分

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

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

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

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

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

最后，我們可以進(jìn)入客戶預(yù)訂部分。

客戶預(yù)訂部

它的配置與 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ī)生和預(yù)約（即客戶預(yù)約）的數(shù)據(jù)。作為準(zhǔn)備步驟，你需要將時(shí)間轉(zhuǎn)換為當(dāng)?shù)貢r(shí)區(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);
});

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

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

總結(jié)

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

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

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

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