Day/Week filter overlaps after re-rendering

Scheduler
#1

Hello,

I’ve been working on the scheduler and decided to add calendar filtering (DAY/WEEK) only.
So I added these lines of code in my render

<div class="dhx_cal_tab custom_tab" name="day_tab" style={{color: '#008577',border: '1px solid #008577',right:'204px', left:'0px'}}></div>
<div class="dhx_cal_tab custom_tab" name="week_tab" style={{color: '#008577',border: '1px solid #008577',right:'140px',left:'0px'}}></div>

It works fine on first load (see pic below):

36%20AM
36%20AM861×378 12.9 KB

But after I leave the page, then go back to the page where the calendar is (re-rendered page),
it overlaps as shown in the pic below:

47%20AM
47%20AM875×390 13 KB

#2

Hello @Asyong,

Are you are using some framework, like angular, react, or view?

A similar issue could have occurred in the “angular” integration. Highly likely it’s connected with “angular routing”, which not reloads the page on the link click, is it your case?
If it’s so, you can try to reload the component manually with something like “$route.reload()`“.

Another approach you can use is to define the buttons through the header config:
https://docs.dhtmlx.com/scheduler/api__scheduler_header_config.html

This fixes the issue, cause the scheduler will use the config instead of the “HTML” markup to create the navline.

It may look like in this code fragment:

initSchedulerTool() { // Define header through the config
scheduler.config.header = [
"day",
"week",
"month",
"timeline",
"date",
"prev",
"today",
"next"
];
...

If it’s not your case, could you please clarify the issue with more details, or send me a simplified demo, which I will be able to run locally and reproduce the issue?

#3

Hello @Siarhei,

I am using react with routing. I also confirmed that what you said was the case. My component is re-mounting. I will try the solution you told me.

Thank you!

#4

Hello again @Siarhei,

I tried it and it works. The only problem left for me is that I’m using a custom styling for those buttons.
I will review the documentation and see if there are anyways i can override the style from the config.

Thanks again!