{"id":13678,"date":"2025-04-10T18:18:48","date_gmt":"2025-04-10T15:18:48","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=13678"},"modified":"2025-04-10T19:18:19","modified_gmt":"2025-04-10T16:18:19","slug":"frontend-setup-integrating-dhtmlx-booking-scheduler","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/frontend-setup-integrating-dhtmlx-booking-scheduler\/","title":{"rendered":"Frontend Setup for Integrating DHTMLX Booking and Scheduler"},"content":{"rendered":"

The DHTMLX JS booking calendar widget<\/a> is the latest addition to our portfolio of JavaScript tools for project management apps. It is designed to help dev teams build custom booking systems enriched with features for conveniently making appointments on the web. <\/p>\n

What makes it even more powerful is its seamless integration with the DHTMLX JavaScript scheduling component<\/a>, enabling developers to build more advanced and feature-rich scheduling solutions. In this guide, we\u2019ll walk you through the process of combining these two components on the frontend. Next time, we\u2019ll cover the backend part, where all the data is stored and converted for each component separately.<\/p>\n

Example of Using DHTMLX Booking with Scheduler Component<\/h5>\n

It is hard to imagine a modern hotel, healthcare clinic, or beauty salon without a reliable booking system. Such tools allow organizations to streamline their operations by offering clients a hassle-free way to make appointments and reservations online. <\/p>\n

It is not easy to find a ready-made solution that meets all the technical requirements and functional capabilities of a particular business model. That\u2019s where DHTMLX Booking and Scheduler can make a difference. Using these fully compatible JavaScript UI components, dev teams can build a custom appointment scheduling solution that complies with specific requirements with less time and effort. <\/p>\n

Our team prepared the integration demo<\/a> that vividly demonstrates how the DHTMLX Booking widget can be combined with the Scheduler within a single solution for a medical center.<\/p>\n

The demo consists of three main sections – Doctor Schedule, Booking, and Client Reservations. <\/p>\n

\"Integration<\/p>\n

It is necessary to mention the main functional concepts used in each section of our demo:<\/p>\n

    \n
  1. The Scheduler’s Timeline view presents periods of doctors’ availability using single and recurring events (Doctor Schedule).<\/li>\n
  2. The Booking widget generates available time slots from Scheduler data (events).<\/li>\n
  3. Reserved time slots are displayed in the auxiliary section based on Scheduler (Client Reservations).<\/li>\n<\/ol>\n

    The trickiest part of this integration is converting Scheduler events to Booking slots, which occurs on the server side. <\/p>\n

    In this article, you will learn how to configure both DHTMLX components, thereby preparing them for achieving the main goal on the server-side.<\/p>\n

    Configuring Scheduler and Booking Components on Frontend<\/h5>\n

    Before delving into the configuration peculiarities of all three sections implemented in our demo, we want to clarify several important details related to time slots (i.e. time units available for booking), recurrence, and timestamps. <\/p>\n

    There are two approaches to working with time slots in DHTMLX Booking:<\/p>\n

      \n
    1. Showing schedules with only available time slots via the availableSlots<\/strong> parameter of the data property (for scenarios without recurrences).<\/li>\n
    2. Showing schedules with recurring events\/recurring patterns and already reserved time slots using the slots<\/strong> array and usedSlots<\/strong> parameter of the data<\/strong> property. This approach is used in our integration demo.<\/li>\n<\/ol>\n

      Since the Booking widget currently supports only weekly recurring events, it is necessary to exclude other recurrence options available in Scheduler in its config.<\/p>\n

      And lastly, we have to mention that Booking works with timestamps in the local timezone. When dealing with global timestamps, it is required to perform a corresponding conversion before sending these timestamps to Booking (and vice versa before saving the data back). Conversion instructions are provided on this page.<\/p>\n

      Let us review how to configure each section separately and emphasize the main aspects of this process. <\/p>\n

      Doctor Scheduler Section<\/h6>\n

      \"Doctor
      \nFirst of all, it is necessary to create a separate Scheduler instance for the Doctor Schedule section with the       Timeline view<\/a>. It is done the following way:<\/p>\n

      if<\/span> (<\/span>schedulerWidget)<\/span> schedulerWidget.destructor<\/span>(<\/span>)<\/span>;<\/span>
      \nschedulerWidget =<\/span> Scheduler.getSchedulerInstance<\/span>(<\/span>)<\/span>;<\/span>
      \n
      \nschedulerWidget.plugins<\/span>(<\/span>{<\/span>
      \n   timeline:<\/span> true<\/span>,<\/span>
      \n   daytimeline:<\/span> true<\/span>,<\/span>
      \n   recurring:<\/span> true<\/span>,<\/span>
      \n   tooltip:<\/span> true<\/span>,<\/span>
      \n   minical:<\/span> true<\/span>
      \n}<\/span>)<\/span>;<\/span>
      \n
      \nschedulerWidget.createTimelineView<\/span>(<\/span>{<\/span>
      \n   name:<\/span> "timeline"<\/span>,<\/span>
      \n   ...
      \n}<\/span>)<\/span>;<\/span>
      \n
      \nschedulerWidget.init<\/span>(<\/span>"doctor_scheduler"<\/span>,<\/span> utcDate,<\/span> "timeline"<\/span>)<\/span>;<\/span><\/div><\/div>\n

      First, you need to load doctors\u2019 schedules. After that, you initialize the DataProcessor<\/a> and bind the Scheduler instance for integration with the backend, where all the data will be stored:<\/p>\n

      schedulerWidget.load<\/span>(<\/span>URL(<\/span>"\/doctors\/worktime"<\/span>)<\/span>)<\/span>;<\/span>
      \nif<\/span> (<\/span>dp)<\/span> dp.destructor<\/span>(<\/span>)<\/span>;<\/span>
      \ndp =<\/span> new<\/span> scheduler.DataProcessor<\/span>(<\/span>URL(<\/span>"\/doctors\/worktime"<\/span>)<\/span>)<\/span>;<\/span>
      \ndp.init<\/span>(<\/span>scheduler)<\/span>;<\/span><\/div><\/div>\n

      Since the Booking widget works well either with weekly schedules or arbitrary dates, you need to adjust Scheduler to create repetitive weekly events. To do that, you set a custom form for editing recurring events via schedulerWidget.form_blocks.recurring.render<\/strong>:<\/p>\n

      schedulerWidget.form_blocks<\/span>.recurring<\/span>.render<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
      \n   return<\/span> \/* custom HTML for form *\/<\/span>;<\/span>
      \n}<\/span>;<\/span><\/div><\/div>\n

      Using templates provided in Scheduler API, you can change the appearance of timeline elements, specify display of past events, and add custom content in event bars and tooltips. <\/p>\n

      Booking Section<\/h6>\n

      \"Booking<\/p>\n

      You\u2019ll need our JavaScript booking widget to add this section. It offers most of the required functionality out of the box, so you\u2019ll only need to initialize the widget and synchronize data.<\/p>\n

      You initialize the Booking widget and load doctors\u2019 data<\/a> with their schedules and already booked slots from the backend, after converting all global timestamps into local ones.<\/p>\n

      bookingWidget =<\/span> new<\/span> booking.Booking<\/span>(<\/span>"#root"<\/span>,<\/span> {<\/span>
      \n    start:<\/span> utcDate(<\/span>)<\/span>,<\/span>
      \n    end:<\/span> utcDate(<\/span>\/*add 2 years*\/<\/span>)<\/span>,<\/span>
      \n}<\/span>)<\/span>
      \n
      \nfetch(<\/span>URL(<\/span>"\/units"<\/span>)<\/span>)<\/span>
      \n   .then<\/span>(<\/span>res =><\/span> res.json<\/span>(<\/span>)<\/span>)<\/span>
      \n   .then<\/span>(<\/span>units =><\/span> {<\/span>
      \n       \/\/ convert timestamps<\/span>
      \n       ...
      \n       bookingWidget<\/span>.setConfig<\/span>(<\/span>{<\/span> data:<\/span> units }<\/span>)<\/span>;<\/span>
      \n   }<\/span>)<\/span>;<\/span><\/div><\/div>\n

      You need to create a handler for processing reservations of time slots and convert local timestamps to global ones. This handler sends a POST request to the server, the data is saved in the same collection that is used when displaying data in the Client Reservation section:<\/p>\n

      bookingWidget.setConfirmHandler<\/span>(<\/span>event =><\/span> {<\/span>
      \n    const<\/span> {<\/span> confirm,<\/span> slot,<\/span> data }<\/span> =<\/span> event;<\/span>
      \n    const<\/span> info =<\/span> {<\/span> \/*event data*\/<\/span>}<\/span>;<\/span> \/\/ convert timestamps <\/span>
      \n
      \n    fetch(<\/span>URL(<\/span>"\/doctors\/reservations"<\/span>)<\/span>,<\/span> {<\/span>
      \n       method:<\/span> "POST"<\/span>,<\/span>
      \n       body:<\/span> JSON.stringify<\/span>(<\/span>info)<\/span>,<\/span>
      \n    }<\/span>)<\/span>.then<\/span>(<\/span>response =><\/span> {<\/span>
      \n        if<\/span> (<\/span>response.ok<\/span>)<\/span> confirm.done<\/span>(<\/span>)<\/span>;<\/span>
      \n        else<\/span> confirm.error<\/span>(<\/span>)<\/span>;<\/span>
      \n    }<\/span>)<\/span>;<\/span>
      \n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

      Finally, we can proceed to the Client Reservation section.<\/p>\n

      Client Reservations Section<\/h6>\n

      \"Client
      \nClient Reservations is an auxiliary section of our integration demo aimed to visualize reserved time slots via Scheduler views.<\/p>\n

      It is configured similarly to the Doctor Schedule section, but the config itself is different.<\/p>\n

      For this section, you set the Unit view with week units:<\/p>\n

      if<\/span> (<\/span>schedulerWidget)<\/span> schedulerWidget.destructor<\/span>(<\/span>)<\/span>;<\/span>
      \nschedulerWidget =<\/span> Scheduler.getSchedulerInstance<\/span>(<\/span>)<\/span>;<\/span>
      \n
      \nschedulerWidget.plugins<\/span>(<\/span>{<\/span>
      \n   units:<\/span> true<\/span>,<\/span>
      \n   ...
      \n}<\/span>)<\/span>;<\/span>
      \n
      \nschedulerWidget.createUnitsView<\/span>(<\/span>{<\/span>
      \n   name:<\/span> "week_unit"<\/span>,<\/span>
      \n   property:<\/span> "doctor_id"<\/span>,<\/span>
      \n   list:<\/span> doctors,<\/span>
      \n   days:<\/span> 3<\/span>,<\/span>
      \n}<\/span>)<\/span>;<\/span>
      \n
      \nschedulerWidget.init<\/span>(<\/span>"client_scheduler"<\/span>,<\/span> utcDate,<\/span> "week_unit"<\/span>)<\/span>;<\/span><\/div><\/div>\n

      First, you need to get data on doctors and scheduled appointments (i.e., client reservations). As a preparatory step, you should convert the time to a local timezone. <\/p>\n

      To load this data from the backend, you\u2019ll need the following code:<\/p>\n

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

      The configuration of this section includes Units view, readonly mode, mini calendar (date picker), and a popup with event details (quick info). Apart from that, we also added a couple of customizations for the Quick Info window and vertical text display in the Unit view .<\/p>\n

      That\u2019s it. These are the main steps required to implement the frontend part of the booking solution like in our demo using DHTMLX components. <\/p>\n

      Wrapping Up<\/h5>\n

      As you can see, DHTMLX products allow for building feature-packed booking systems for streamlined appointment scheduling tailored to various industries. Extensive functional capabilities of the Scheduler component (customizable calendar views, recurring events, etc.) combined with the ready-made UI for managing reservations of the Booking widget give you everything you need to deliver a modern booking solution for the web. <\/p>\n

      Next time, you will learn the main peculiarities of data conversion required for integration of DHTMLX Booking with Scheduler on the backen\u0432 like in our demo<\/a>.<\/p>\n

      Related Materials<\/h5>\n

      Apart from the Timeline view and recurrence of events, the configuration of this section also includes other extensions (plugins) such as a mini calendar and tooltips. The full list of available Scheduler plugins can be found on this page<\/a>.<\/p>\n