{"id":13567,"date":"2025-03-12T11:11:20","date_gmt":"2025-03-12T08:11:20","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=13567"},"modified":"2025-04-16T17:32:55","modified_gmt":"2025-04-16T14:32:55","slug":"dhtmlx-booking-1-1","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-booking-1-1\/","title":{"rendered":"DHTMLX Booking 1.1: Lazy Rendering, Customizable Cards, and Integration Demos with Frameworks"},"content":{"rendered":"

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<\/a> widget.<\/p>\n

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.<\/p>\n\n\t\t

\n\t\t
\n\t\t
\n\t\t
Download DHTMLX Booking Widget v1.1<\/div>\n\t\t
Estimate the initial functionality for delivering a multifunctional JavaScript booking calendar<\/div>\n <\/div>\n\t\t \n \n
\n Get free trial<\/a>\n <\/div>\n \n <\/div>\n\t\t<\/div>\n\t\n

Let us get acquainted with the novelties in more detail. <\/p>\n

Lazy Rendering<\/h5>\n

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.<\/p>\n

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<\/strong> parameter in the renderType<\/a><\/strong> property:<\/p>\n

new<\/span> booking.Booking<\/span>(<\/span>"#root"<\/span>,<\/span> {<\/span>
\n    data,<\/span>
\n    renderType:<\/span> "lazy"<\/span>,<\/span>
\n    \/\/ other parameters<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

After that, only cards within the viewport (visible to end-users) will be rendered in the UI, making it more dynamic and user-friendly.<\/p>\n

Test how it works in practice using this live sample<\/a>.<\/p>\n

Templates for Customizing Cards<\/h5>\n

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.<\/p>\n