dhtmlx scheduler destroy

Scheduler Javascript
#1

Hi All,

I’m using dhtmlxScheduler v.4.3.1 with angularjs (https://dhtmlx.com/blog/creating-event-calendar-with-dhtmlxscheduler-and-angularjs/).

Every time I switch from a page to the one with the scheduler a new scheduler instance is created.

Is there any way to destroy the scheduler?

I search in the forum:

http://forum.dhtmlx.com/viewtopic.php?f=6&t=51549&p=142943&hilit=destroy#p142943
http://forum.dhtmlx.com/viewtopic.php?f=6&t=38465&p=119929&hilit=destroy#p119929
http://forum.dhtmlx.com/viewtopic.php?f=6&t=38465&p=119915&hilit=destroy#p119915
http://forum.dhtmlx.com/viewtopic.php?f=6&t=33591&p=105369&hilit=destroy#p105369

but I didn’t find any solving answer.

Is there any “destroy scheduler” method in roadmap for free or pro version?

Thanks

Michele

#2

Hi,
currently, there is no destructor, scheduler works as a static object.

In your case, you can workaround this by reusing a single instance of scheduler.
You can store the instance of scheduler after you hide calendar. And when you need to show it again you initialize the same instance in the new container, rather than creating a new instance of scheduler.

scheduler.init("newContainerId");

scheduler.init can be called multiple times. Please note that initialization does not clear previously attached event handlers (e.g. scheduler.attachEvent(“onViewChange”, function(){/do something/}) ) and templates, so if you define event handlers upon scheduler initialization - you’ll need to make sure they attached only once.

Is there any “destroy scheduler” method in roadmap for free or pro version?

We’ll possibly add it in the next major update, but it’s not for sure. In most use cases scheduler instance is supposed to live as long as page lives, so the lack of destructor wasn’t a priority issue.

#3

Hello,

how can i use a scheduler in dhtmlx window object??

When i close and open the window 3 times and then add an event, the same event come´s 3 times.

Please help.

Thanks

#4

Hi,
can you please show some code, so we could better understand the issue?

Most probably you initialize scheduler each time window is opened, and as a part of this initialization, you attach event listeners, dataProcessor, etc.
As a solution, make sure to perform a complete initialization only once when scheduler window is shown for the first time and all the next times call only scheduler.init/scheduler.clearAll/scheduler.load without reapplying event listeners and a data processor

#5

Hi,

I open this thread again to know if there is today a new function to destroy the scheduler instance ?

Whenever i call the scheduler, i check if there is already an instance. If it’s the case, i only call the init function.

But all the event handlers are calling multiple times.

For example, if i call (and init) the scheduler 4 times, whenever i change the position of an event, i have 4 confirmation messages.

So, if there isn’t a destroy function how can i make my event handlers attached only once?

Thanks

#6

Hi,

Unfortunately there is no news related to destroying the Scheduler instance.

Could you please clarify why do you init the Scheduler 4 times? Possibly it will be enuogh just to reload data.

#7

Okey.

So i’ve got a Vue SPA with multi pages. One page is using a scheduler.
So the first time i open this page, i create the instance (‘scheduler.createTimelineView’, event loaders, lightbox customisation,…).

If i change to another page and then i go back to the scheduler page, my application knows that there is already an instance of scheduler so it just do this line “scheduler.init(“scheduler_here”,new Date(),“timeline”);”. So that means that i still have an instance of Scheduler.

BUT, i think the event loaders are created every time i go to the scheduler page. So that means that if i go 4 times in this page, each event loader is created 4 times as well. That’s why i get 4 confirmation messages.

#9

Why do you call init method each time when go back to the scheduler page? If the instance already exist there.

#10

Because if i don’t call the init method, the scheduler table is empty. I just have the header.

Is it possible to use the old instance ? Or what else should i do ?

#11

Try to remove container with Scheduler when you go to another page, and add them again before init when you go back to the Scheduler page.

I mean all these elements:

<div id="scheduler_here" class="dhx_cal_container" style="width:100%; height:100%;">
	<div class="dhx_cal_navline">
		<div class="dhx_cal_prev_button">&nbsp;</div>
		<div class="dhx_cal_next_button">&nbsp;</div>
		<div class="dhx_cal_today_button"></div>
		<div class="dhx_cal_date"></div>
		<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
		<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
		<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
	</div>
	<div class="dhx_cal_header">
	</div>
	<div class="dhx_cal_data">
	</div>
</div>
#12

Still doesn’t work…

It may be because of Vue.JS. I’m using components to display my pages. The scheduler page is a component.

I tried to destroy the container after i leave the page (inside the beforeRouteLeave() function). Then when i go back to the scheduler page, i destroy again the container and create a new one just before i call the init call.

But unfortunately it still calls twice or more the confirmation message.

So this confirmation message i declare them inside the scheduler.attachEvent(‘onBeforeEventChanged’) function. And it is only called the first time i enter in the scheduler page. The other times i don’t call this function. Don’t know if it helps you.

1 Like
#13

Have the same issue as @wigo_gm. I think we definitely need some kind of destructor.

1 Like
#14

Unfortunately the implementation of the destructor is not planned in the near future.

#15

Is there any updates about integrating dhtmlx with vue.js ?

#16

Hello @Lahcen_Lachgar,

The dev team working on the special destructor method, that will solve the mentioned issue, there is no ETA, but it’s planned for the 5.4 version.

Currently, you can detach events manually with the detachEvent method:
https://docs.dhtmlx.com/scheduler/api__scheduler_detachevent.html

This solves the most usual problem for frameworks - multiple evens attaching on app navigation(reopening tab with the scheduler).

Angular code example:

ngOnInit() {
const onEvClick = scheduler.attachEvent("onClick", function (id, e) {
dhtmlx.message(`onClick: Event ID: ${id}`);
return true;
});
eventIDs.push(onEvClick);

...

ngOnDestroy(): void{
scheduler.clearAll();
eventIDs.forEach(event => scheduler.detachEvent(event));
eventIDs = [];
}

You can check how it works in follows demo(scheduler component):
https://files.dhtmlx.com/30d/2ce72c35d2b5d86b149e8bd361ebe70b/angular11+gantt__GPL+scheduler_GPL.zip

#17

FYI, the destructor method was added in dhtmlxScheduler v6.0

https://docs.dhtmlx.com/scheduler/what_s_new.html#60

#18

i tried the destructor but it doesn’t work. we needed this in our angular application and we place it in ngOnDestroy but still no luck… the documentation about it is very minimal, i wish you guys have better content writer to document things properly per technology as waiting for support’s replay is not ideal due to time constrains. I also have connected with you guys via email and there is no response for weeks now from one of your team “Sergey”. We thought we will get better support due to we have a purchase license.