Problem displaying the schedule when opened in two places

Scheduler
#1

Hello,
We’re developing an application with our internal framework and we’ve integrated the timeline view of the dhtmlx scheduler component.
We have a UI that will display this component as you can see, and no problems.

image
image1857×816 97.3 KB

However, we have another UI where we can display this component in popup mode. When we open it, no problem either.
image
image1915×907 128 KB

But when we return to our first UI, the schedule has completely unloaded.
image
image1917×909 45 KB

And when we move the window, the data comes back.

And yet, we’re only initializing the right schedule instances.
image

We initialize the schedule only if it isn’t, and we setCurrentView
image

I don’t understand where this could be coming from and I don’t think it’s related to our framework, but maybe I’m wrong.
I don’t master the subject perfectly, since I’m not the one who implemented the component and I’m not a great js connoisseur.

#2

When I change UI I have a data watch that is called. This watch cleans the data and displays it in the schedule.
The problem is solved by adding scheduler = Scheduler.getSchedulerInstance(); just after like this:

data: {            
            handler(newValue) {                                
                if (scheduler._is_initialized())
                {
                    clearAndLoadData(scheduler, newValue);
                    scheduler = Scheduler.getSchedulerInstance();
                }   
                
                // if (scheduler._is_initialized()) {
                //     clearAndLoadData(scheduler, newValue);
                // } else {
                //     scheduler = Scheduler.getSchedulerInstance();
                //     scheduler.init(this.$refs.SchedulerComponent, new Date(), "timeline");
                // }   
            },
            immediate: true,
            deep: true
        },

Except that to change the date and move it on the schedule, we use a button of our own that changes a startDate parameter passed to the component. So I had a watch of this property that did a setCurrentView with our new date

startDate: {
            handler(newDate) {
                if (newDate) {    
                    if (!isNaN(newDate)) {
                        var tempNewDate = new Date(newDate);
                        tempNewDate.setDate(newDate.getDate() - 5);
                        scheduler.setCurrentView(tempNewDate);
                    } else {
                        console.error('Date invalide :', newDate);
                   }                   
                }
            }
        }

Except that now the setCurrentView doesn’t work any more, as the component is apparently no longer initialized.
And I don’t want to reinitialize the component every time I click on the arrow to move it.

#3

Hello @Kilian_Delsaut ,

Unfortunately, it’s quite hard to provide direct suggestions from code fragments and description, as the app logic is still isn’t clear.

However, we have another UI where we can display this component in popup mode. When we open it, no problem either.
But when we return to our first UI, the schedule has completely unloaded.
I don’t understand where this could be coming from and I don’t think it’s related to our framework, but maybe I’m wrong.
I don’t master the subject perfectly, since I’m not the one who implemented the component and I’m not a great js connoisseur.

Likely it occurs, because scheduler component unmounts, or something like this(can’t say what happens from the provided code). So you can reinitialize scheduler after closing popup.

But regarding this fragment:

Except that now the setCurrentView doesn’t work any more, as the component is apparently no longer initialized.
And I don’t want to reinitialize the component every time I click on the arrow to move it.

Reinitialize scheduler component on different actions is quite correct use case if it unmounts(even as I don’t fully understand what happens on the arrows click),