JavaScript Booking Widget for Your Web App

Build a real-time availability calendar with a clean UI and wide filtering options. Combine with DHTMLX Scheduler to gain an outstanding scheduling solution.

DHTMLX Availability Calendar Features

Flexible specialist card structure

Сhoose what information to display on the card’s left side. The DHTMLX Booking widget allows you to load an image preview, title, category, and price by default. To improve end-user experience, you can set the posting reviews feature as well as rating services using a 5-star scale.

Displaying available time slots

Enable businesses to set working hours so their customers can check real-time staff availability. Our JavaScript booking widget prevents double-booking as it shows only available time slots for the date selected in the calendar. You can define slot rules and set the start/end time, size, and gap.

Configurable reservation form

Use a default reservation form or tailor it according to your project's unique needs. DHTMLX booking widget allows adding new fields clients had to fill in to make a reservation and managing information that will be displayed on the form’s left side.

Searching by a desired specialist

Create a calendar availability tool with different input fields for user-friendly content filtering. You can create a nested list of specialists and specify their field of activity and location thus letting end-users quickly find out the required option. The filter settings are configured via the widget’s API.

Filtering by date and preferable time

Let your users view real-time availability and self-schedule their appointments easily by attaching a date picker to pick the proper date. You can also add a multi-selection list box where end-users can choose the most convenient time for them to visit.

Applying automatic filtering

Boost the user experience by setting the automatic filtering feature. Our JavaScript booking calendar allows hiding the Search button and automatically applying the user’s input or choice in real time.

Applying custom styles

Customize the appearance of our appointment booking widget by adding the corresponding CSS variables. You can tailor the Material built-in theme or modify the colors of any element, e.g., the background color of cards.

Why Choose DHTMLX Booking Widget?

Complete set of built-in features

The DHTMLX widget was designed to add a user-friendly booking availability calendar to your website or web app. It empowers users to make appointments online 24/7, search for a specialist, and select the most convenient time for their visit.

Flexible customization

You’re free to build a custom booking system by modifying the widget’s look and feel to fit seamlessly into project requirements. Starting from the first version, the DHTMLX booking widget provides the Material theme that can be customized with CSS variables.

Smooth integration with DHTMLX widgets

You can combine the JavaScript booking calendar with other DHTMLX components. Thus, you may sync the Booking widget with our Scheduler and Event Calendar libraries to build powerful online scheduling apps.

Support for touch screens

The DHTMLX booking calendar widget allows end-users to reserve appointments on their phones or tablets quickly and easily. As on the desktop, the mobile version enables making a reservation online in a few taps.

Cross-browser compatibility

DHTMLX Booking Widget is cross-browser compatible, supporting Chrome, Firefox, Safari, IE11, and all Chromium-based browsers, including like Microsoft Edge, Opera, and Vivaldi. Being a pure JavaScript component, it integrates seamlessly with any front-end or back-end technology.