{"id":10198,"date":"2022-05-19T13:23:33","date_gmt":"2022-05-19T10:23:33","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=10198"},"modified":"2024-08-16T12:22:25","modified_gmt":"2024-08-16T09:22:25","slug":"dhtmlx-scheduler-6-0","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/dhtmlx-scheduler-6-0\/","title":{"rendered":"DHTMLX Scheduler 6.0 with ES6 Module Support, Destructors, New Timeline Features, Enhanced DataProcessor and API"},"content":{"rendered":"

We are happy to announce a highly anticipated release of DHTMLX Scheduler 6.0. When working on this quality-of-life update, our development team primarily focused on making the JavaScript scheduling component<\/a> more developer-friendly. We have updated the package structure and TypeScript definitions, cleaned up legacy modules, and provided some long-awaited features. For instance, the new version comes with the modified API providing additional useful capabilities. Among them are a long-overdue destructor for the scheduler instance, updated dataProcessor for simpler integrations, and a couple of new useful features for the popular Timeline view. <\/p>\n

Besides, we have simplified the work with extensions and locales making integration of the Scheduler library with popular JavaScript frameworks easier. We have also ensured compatibility with Salesforce LWC.<\/p>\n

Evaluate the new version 6.0 of DHTMLX Scheduler ><\/a>
\n<\/strong>
\nLet us consider all these novelties in more detail.<\/p>\n

Updated Package Structure with ES6 Module Support<\/h5>\n

High usability is one of the determining factors for productive work with JavaScript libraries, and we’ve made a big step forward in this direction in v6.0. From now on, you can easily import Scheduler as an ES6 module<\/a> without the need for declaring global objects.<\/p>\n

import<\/span> {<\/span> scheduler,<\/span> Scheduler }<\/span> from 'dhtmlx-scheduler'<\/span>;<\/span><\/div><\/div>\n

All extensions have been included in the main file of the Scheduler component and now are enabled with the plugins()<\/a><\/strong> method.<\/p>\n

scheduler.plugins<\/span>(<\/span>{<\/span>
\n    limit:<\/span> true<\/span>,<\/span>
\n    timeline:<\/span> true<\/span>,<\/span>
\n    units:<\/span> true<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Another notable change is the removal of all locale files from the package. You can also benefit from the new API for the Scheduler localization added in this release. It provides the i18n<\/a><\/strong> object with an array of methods for enabling the required UI language.<\/p>\n

scheduler.i18n<\/span>.setLocale<\/span>(<\/span>"es"<\/span>)<\/span>;<\/span><\/div><\/div>\n

Just like extensions, locales are now included in the dhtmlxscheduler.js<\/strong> file. Thus it will be really simple to activate them when needed.<\/p>\n

Custom locales and extensions that are defined in separate files can still be used.<\/p>\n

Updated Routing Options for DataProcessor<\/h5>\n

The DataProcessor library is responsible for communicating with the server-side and tracking all changes in the Scheduler. It has been enriched with the ability to specify custom routing options<\/a>. They provide you with a single point where you can capture all changes made in the Scheduler, allowing you to connect it to the rest of the application. Custom routing options are enabled with the help of the createDataProcessor()<\/a><\/strong> method:<\/p>\n

scheduler.createDataProcessor<\/span>(<\/span>{<\/span>
\n    event:<\/span> {<\/span>
\n        update:<\/span> (<\/span>event,<\/span> id)<\/span> =><\/span> {<\/span>
\n            \/\/ event has been updated<\/span>
\n        }<\/span>,<\/span>
\n        create:<\/span> (<\/span>event)<\/span> =><\/span> {<\/span>
\n            \/\/ event has been created<\/span>
\n            return<\/span> new<\/span> Promise(<\/span>(<\/span>resolve,<\/span> reject)<\/span> =><\/span> {<\/span>
\n                \/\/ insert the event into the database<\/span>
\n                \/\/ resolve with the permanent event id when done<\/span>
\n                \/\/ ...<\/span>
\n                resolve(<\/span>{<\/span>id:<\/span> databaseId}<\/span>)<\/span>;<\/span>
\n            }<\/span>)<\/span>;<\/span>
\n        }<\/span>,<\/span>
\n        delete<\/span>:<\/span> (<\/span>id)<\/span> =><\/span> {<\/span>
\n            \/\/ event has been deleted<\/span>
\n        }<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

It’s worth noting that the DataProcessor router format is compatible with the DataProcessor of DHTMLX Gantt<\/a>, which means you use the same router object for both DHTMLX Scheduler and DHTMLX Gantt when both are used in the application.<\/p>\n

Destructors for Scheduler and DataProcessor Instances<\/h5>\n

Another much-anticipated feature aimed to simplify the work of our Scheduler component in combination with top JavaScript frameworks (React, Angular, Vue.js) is the destructor()<\/strong> method for the Scheduler and DataProcessor<\/a>.<\/p>\n

When incorporating DHTMLX Scheduler into a SPA (Single Page Application), lacking a proper destructor was a major inconvenience for many of our users. We are glad to tell you that the newly added destructor()<\/a><\/strong> method solves this problem. Instead of reusing the global instance of the Scheduler component, you can now create a new instance when the Scheduler must be activated and destroy it when it’s no longer needed:<\/p>\n

import<\/span> {<\/span> Scheduler }<\/span> from "dhtmlx-scheduler"<\/span>;<\/span>
\n 
\nexport<\/span> class<\/span> SchedulerComponent implements<\/span> OnInit {<\/span>
\n    @<\/span>ViewChild(<\/span>'scheduler_here'<\/span>)<\/span> schedulerContainer:<\/span> ElementRef;<\/span>
\n 
\n    constructor(<\/span>private calendarEventService:<\/span> CalendarEventService)<\/span> {<\/span> }<\/span>
\n 
\n    ngOnInit(<\/span>)<\/span> {<\/span>
\n        const<\/span> scheduler =<\/span> this<\/span>.$scheduler =<\/span> Scheduler.getSchedulerInstance<\/span>(<\/span>)<\/span>;<\/span>
\n        scheduler.init<\/span>(<\/span>this<\/span>.schedulerContainer<\/span>.nativeElement<\/span>)<\/span>;<\/span>
\n 
\n        scheduler.createDataProcessor<\/span>(<\/span>{<\/span>
\n            event:<\/span> {<\/span>
\n                update:<\/span> (<\/span>data:<\/span> CalendarEvent)<\/span> =><\/span> this<\/span>.calendarEventService<\/span>.update<\/span>(<\/span>data)<\/span>,<\/span>
\n                create:<\/span> (<\/span>data:<\/span> CalendarEvent)<\/span> =><\/span> this<\/span>.calendarEventService<\/span>.insert<\/span>(<\/span>data)<\/span>,<\/span>
\n                delete<\/span>:<\/span> (<\/span>id)<\/span> =><\/span> this<\/span>.calendarEventService<\/span>.remove<\/span>(<\/span>id)<\/span>
\n            }<\/span>
\n        }<\/span>)<\/span>;<\/span>
\n 
\n        this<\/span>.calendarEventService<\/span>.get<\/span>(<\/span>)<\/span>.then<\/span>(<\/span>(<\/span>events)<\/span> =><\/span> {<\/span>
\n            scheduler.parse<\/span>(<\/span>events)<\/span>;<\/span>
\n        }<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n 
\n    ngOnDestroy(<\/span>)<\/span> {<\/span>
\n        this<\/span>.$scheduler.destructor<\/span>(<\/span>)<\/span>;<\/span>
\n        this<\/span>.$scheduler =<\/span> null<\/span>;<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

The destructor()<\/a><\/strong> method can also be applied for clearing the dataProcessor instance and detaching it from the Scheduler.<\/p>\n

const<\/span> dataProcesor =<\/span> scheduler.createDataProcessor<\/span>(<\/span>{<\/span>
\n    event:<\/span> {<\/span>
\n        update:<\/span> (<\/span>data:<\/span> CalendarEvent)<\/span> =><\/span> this<\/span>.calendarEventService<\/span>.update<\/span>(<\/span>data)<\/span>,<\/span>
\n        create:<\/span> (<\/span>data:<\/span> CalendarEvent)<\/span> =><\/span> this<\/span>.calendarEventService<\/span>.insert<\/span>(<\/span>data)<\/span>,<\/span>
\n        delete<\/span>:<\/span> (<\/span>id)<\/span> =><\/span> this<\/span>.calendarEventService<\/span>.remove<\/span>(<\/span>id)<\/span>
\n    }<\/span>
\n}<\/span>)<\/span>;<\/span>
\n 
\n...
\n 
\ndataProcessor<\/span>.destructor<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n
New Capabilities in Timeline View<\/h5>\n

The Timeline view <\/a>is the most widely used view of our Scheduler that serves for presenting any kind of project activities assigned to project resources and monitoring their progress. In v6.0, we’ve introduced several new customization options that will make this view more configurable and convenient to use. <\/p>\n