DHTMLX Scheduler doesn\u2019t have built-in support for this functionality, but this behavior can be implemented manually using the extensive API of our component. To prove this point, our team prepared a demo that demonstrates how the backlog with drag-and-drop support works in a JS calendar built with DHTMLX. To achieve a similar goal programmatically, you should implement the following:<\/p>\n In the following sections, we\u2019ll explain these and other steps that should be taken to make it work like in our demo. <\/p>\n It is not hard to guess that the first step to take is to initialize the Scheduler component. At this point, you configure Scheduler views and enable necessary plugins.<\/p>\n You should use scheduler.config.first_hour<\/a> and scheduler.config.last_hour<\/a> properties to set the necessary timeframe, including only working hours (06:00 – 20:00), and show it in Scheduler.<\/p>\n You’ll also need a shared store object to manage tasks across the application. It allows updating, adding, or removing tasks in one place and ensuring that both the backlog and the scheduler reflect the same data.<\/p>\n To display only weekdays, use the built-in ignore_{viewName}<\/a><\/strong> method:<\/p>\n
\n![\"backlog](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/08\/backlog.gif\")
Check the sample ><\/a><\/p>\n\n
Step 1: Scheduler Initialization<\/h5>\n
\n units:<\/span> true<\/span>,<\/span>
\n timeline:<\/span> true<\/span>,<\/span>
\n tooltip:<\/span> true<\/span>,<\/span>
\n quick_info:<\/span> true<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
\n let tasks =<\/span> [<\/span>]<\/span>;<\/span>
\n let units =<\/span> [<\/span>]<\/span>;<\/span>
\n let priorities =<\/span> [<\/span>]<\/span>;<\/span>
\n
\n const<\/span> subs =<\/span> new<\/span> Set(<\/span>)<\/span>;<\/span>
\n const<\/span> notify =<\/span> (<\/span>)<\/span> =><\/span> subs.forEach<\/span>(<\/span>(<\/span>fn)<\/span> =><\/span> fn(<\/span>getState(<\/span>)<\/span>)<\/span>)<\/span>;<\/span>
\n const<\/span> deepObjClone =<\/span> (<\/span>obj)<\/span> =><\/span> JSON.parse<\/span>(<\/span>JSON.stringify<\/span>(<\/span>obj)<\/span>)<\/span>;<\/span>
\n const<\/span> toUnitsList =<\/span> (<\/span>units)<\/span> =><\/span>
\n units.map<\/span>(<\/span>(<\/span>unit)<\/span> =><\/span> (<\/span>{<\/span>
\n key:<\/span> unit.id<\/span>,<\/span>
\n label:<\/span> unit.name<\/span>,<\/span>
\n }<\/span>)<\/span>)<\/span>;<\/span>
\n
\n const<\/span> getState =<\/span> (<\/span>)<\/span> =><\/span> (<\/span>{<\/span>
\n tasks:<\/span> deepObjClone(<\/span>tasks)<\/span>,<\/span>
\n units:<\/span> deepObjClone(<\/span>units)<\/span>,<\/span>
\n priorities:<\/span> deepObjClone(<\/span>priorities)<\/span>,<\/span>
\n }<\/span>)<\/span>;<\/span>
\n
\n return<\/span> {<\/span>
\n getState,<\/span>
\n toUnitsList,<\/span>
\n init(<\/span>data)<\/span> {<\/span>
\n tasks =<\/span> data.tasks<\/span>;<\/span>
\n units =<\/span> data.units<\/span>;<\/span>
\n priorities =<\/span> data.priorities<\/span>;<\/span>
\n notify(<\/span>)<\/span>;<\/span>
\n }<\/span>,<\/span>
\n upsertTask(<\/span>task)<\/span> {<\/span>
\n const<\/span> idx =<\/span> tasks.findIndex<\/span>(<\/span>(<\/span>t)<\/span> =><\/span> t.id<\/span> ===<\/span> task.id<\/span>)<\/span>;<\/span>
\n idx ===<\/span> -<\/span>1<\/span> ?<\/span> tasks.push<\/span>(<\/span>task)<\/span> :<\/span> tasks.splice<\/span>(<\/span>idx,<\/span> 1<\/span>,<\/span> task)<\/span>;<\/span>
\n notify(<\/span>)<\/span>;<\/span>
\n }<\/span>,<\/span>
\n deleteTask(<\/span>id)<\/span> {<\/span>
\n tasks =<\/span> tasks.filter<\/span>(<\/span>(<\/span>t)<\/span> =><\/span> t.id<\/span> !==<\/span> id)<\/span>;<\/span>
\n notify(<\/span>)<\/span>;<\/span>
\n }<\/span>,<\/span>
\n
\n subscribe(<\/span>fn)<\/span> {<\/span>
\n subs.add<\/span>(<\/span>fn)<\/span>;<\/span>
\n fn(<\/span>getState(<\/span>)<\/span>)<\/span>;<\/span>
\n return<\/span> (<\/span>)<\/span> =><\/span> subs.delete<\/span>(<\/span>fn)<\/span>;<\/span>
\n }<\/span>,<\/span>
\n getTaskById(<\/span>id)<\/span> {<\/span>
\n return<\/span> tasks.find<\/span>(<\/span>(<\/span>task)<\/span> =><\/span> task.id<\/span> ===<\/span> id)<\/span>;<\/span>
\n }<\/span>,<\/span>
\n }<\/span>;<\/span>
\n}<\/span>)<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n