Reinitialize again Daypilot component or somehow destroy it on new reinit

There are two options:

1. You can reuse the "dp" instance (and use the update() method to apply the new configuration).
2. Destroy and unbind the old instance by calling dispose():

https://api.daypilot.org/daypilot-scheduler-dispose/

Hi, thank you ... still stuck

I call my initDpScheduler() in daTatables .on(); ...this i can't change if page is loaded... because now dataTables working only on ajax and draws only itself by calling on every draw the initDpScheduler()

1. if i want use dp.update() method i have this problem

function initDpScheduler() {
const dp = new DayPilot.Scheduler("dp");
....
dp.init();
dp.update(resource=resourceJS,events=eventsJS);
}

on 2nd redraw of Datatables (2nd init) i got same issue as before: The target placeholder was already initialized by another DayPilot component instance.

If i change order that first is dp.update(resource=resourceJS,events=eventsJS); dp.init();
i got error: You are trying to update a DayPilot.Scheduler object that hasn't been initialized.

2. i am tryiny use dispose(); method.. but also get stuck.. my plan is find if scheduler initialized and if yes, dispose it and after

function initDpScheduler() {
if (typeof DayPilot.Scheduler === 'undefined' || DayPilot.Scheduler === null) {
const dp = new DayPilot.Scheduler("dp");
....
dp.init();
} else {
DayPilot.Scheduler.dispose();

const dp = new DayPilot.Scheduler("dp");
....
dp.init();
}
}

I got error DayPilot.Scheduler.dispose is not a function and if i use instead of it

dp.dispose(); can't access lexical declaration 'dp' before initialization

I know that i am missing something... but don't know what :(

Normally you initialize the scheduler just once, when the page loads. You need to store the "dp" variable at the top level so you can access it later during the page lifecycle.

If the Scheduler shouldn't be visible during the initial page load, use visible: false property in the config.

When you need to update the Scheduler, use the update() method.

Don't call init() twice on the same instance.

Schematically:

let dp = null;

function pageInit() {
  dp = new DayPilot.Scheduler("dp", { ... });
  dp.init();
}

function updateScheduler(eventsJS, resourcesJS) {
  dp.update({events: events, resources: resourcesJS});
}

Thank you again for your help
Can't upload image to comment. but here is link on screenshot https://ibb.co/vVY8ZjW

I used everything as you did upper... also fixed typo in your code (from events to eventsJS)

But as you can see from screenshot... still wont load second time scheduler because was already inititalized :(
Note: the page is not refreshing... datatables on every ajax call initalize those functions...

Please have you some suggestion ? Where i am wrong ?

Make sure that the pageInit() function is called just once - if you call it the second time it will throw an exception.

Thank you.. i as you wrote..
i inited this pageInit() function only once and that makes the trick... :)

Also i set up in pageInit() function dp.resources = []; dp.events.list = [];
because after load of pageInit(); will immediatelly updated by dp.update(); in update function

Thank a lot for your advices. You created great peace of sofware :)