DHTMLX JS 預約日歷小部件旨在幫助開發團隊構建功能豐富的自定義預約系統，方便用戶在網絡上進行預約。

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

DHTMLX Scheduler 最新版下載

使用 DHTMLX 預訂和調度程序組件的示例

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

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

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

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

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

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

這種集成中最棘手的部分是將調度程序事件轉換為預訂時段，這發生在服務器端。

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

在前端配置調度程序和預訂組件

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

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

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

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

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

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

醫生排程部分

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

首先，你需要加載醫生的日程安排。之后，初始化并綁定 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 組件一樣。

總結

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

關于慧都科技：

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

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