DHTMLX Booking became a part of our product line just at the end of last autumn, enabling dev teams to create online appointment systems with minimum time and effort. Today, we are excited to announce the first official update of this JavaScript Booking Calendar widget.
DHTMLX Booking 1.1 enhances the widget’s performance, customization, and usability with popular front-end frameworks. From now on, it supports lazy rendering to keep the UI lightweight and responsive even with large datasets. The new version also allows you to modify the structure and appearance of cards and the booking dialog. As a bonus, our team also prepared samples of integrating the Booking widget with popular front-end frameworks (React, Angular, Vue, and Svelte) and with the DHTMLX Event Calendar component.
Let us get acquainted with the novelties in more detail.
Lazy Rendering
Smooth performance is one of the key ingredients for a good user experience in web apps, and now you can achieve this goal with the Booking widget using the newly added lazy rendering. This technique helps ensure solid performance even with large amounts of data.
By default, the Booking widget renders all cards loaded to the widget, which can become an issue with the growing number of cards in the system. To keep the interface fast and responsive with many cards, you can enable lazy rendering by adding the lazy parameter in the renderType property:
data,
renderType: "lazy",
// other parameters
});
After that, only cards within the viewport (visible to end-users) will be rendered in the UI, making it more dynamic and user-friendly.
Test how it works in practice using this live sample.
Templates for Customizing Cards
In version 1.1, the structure of the Booking widget becomes more flexible and adjustable to various project requirements. To be more specific, this release unlocks great opportunities for modifying the appearance of card blocks and the booking dialog using templates.
- Customized cards’ view in the list
You can apply a template to customize the layout, design, and content of cards in the list with custom HTML using the cardTemplate property.
Check the sample >
Booking API already includes the cardShape property used to specify fields displayed in cards. For instance, if some default card parameters become irrelevant, it is possible to remove them via the cardShape property.
Check the sample >
Note: Be careful when specifying the appearance of any card simultaneously using both properties mentioned above, since cardTemplate will override the cardShape settings.
The full information on configuring and customizing cards is provided in the documentation.
- Customized Booking dialog
The Booking dialog contains the information block (on the left side) that now can be complemented with custom HTML. For this purpose, you need to apply a custom template using the infoTemplate property.
Check the sample >
The infoShape property is another already existing setting that allows you to choose whether to show or hide specific default parameters of the information block.
Check the sample >
Note: These properties should also be used carefully since infoTemplate overrides the infoShape settings.
This documentation section provides all the necessary details in configuring and customizing the Booking dialog.
Integration with Frameworks and Event Calendar
Starting from v1.1, DHTMLX Booking becomes more adaptable to projects based on top front-end frameworks, thanks to a new pack of integration demos. With these samples and step-by-step instructions, you can learn how to integrate the Booking widget with the preferred framework and make it work in a real web project much faster. For your convenience, we added new integration samples on GitHub:
Apart from that, the release also includes the integration demo of DHTMLX Booking with our JavaScript Event Calendar.
These are all the novelties included in v1.1, and you can run through them one more time in the “What’s new” section.
Want to test DHTMLX Booking 1.1 before choosing it for your web project? Download a free 30-day trial version and get down to it. For our current clients, v1.1 is available in their Client’s Area.
We would appreciate your feedback on this release in the comments below. Stay tuned for more updates from DHTMLX.