As you can see in the screenshot, One day has more events than the size of the day. So it is breaking the UI.
Now, when I dynamically set the size of dhx_scheduler_month then it also increase the size of dhx_cal_data and UI is still breaking.
Is there any way to always adjust the size of dhx_cal_data with its table?
Hello @jaypal999,
Could you please clarify, what exactly is broken, as I can’t see it on the screenshot, do you mean these things(pointed by red arrows):
I asking because the month view is expected to stretch with the rest of the scheduler container when there are too many events. On your screenshot, it looks like some container elements have fixed size and aren’t resized together with the month view, so there is visible overflow, is this the issue you talk about?
I checked the scenario with many events on the month cell with the default skin(terrace), scheduler v5.3.9, and didn’t find any UI issues, here is the live demo:
http://snippet.dhtmlx.com/5/9522abc1b
Could you please reproduce the issue in the demo above(reproduce => click the “Share” button => send me the new link)?
Or send me a simplified demo in which I will be able to run locally and reproduce the issue?
Regarding this part of the question:
“Is there any way to always adjust the size of dhx_cal_data with its table?”
Looks like you are searching for the Container autoresize extension, which forces the scheduler container to automatically change its size to show the whole content without scrolling:
https://docs.dhtmlx.com/scheduler/extensions_list.html#containerautoresize
Here is the previous demo with this extension(HTML/CODE tab):
http://snippet.dhtmlx.com/5/5539bb95f
I asking because the month view is expected to stretch with the rest of the scheduler container when there are too many events. On your screenshot, it looks like some container elements have fixed size and aren’t resized together with the month view, so there is visible overflow, is this the issue you talk about?
Yes, I am talking about that issue. Actually the smaller container as you see in the screenshot is the “.dhx_scheduler_month container” I have tried to set the height for that container. but it also changes the height of the “table” (.dhx_cal_data).
What I really want is, I want to add body scroll for the month view and not the table scroll which is default provided by the dhtmlx scheduler month view.
I have marked the same in the screenshot.
What I really want to achieve is, whenever I add event in any day, at that time day box size will be increased at the same time container size should also be increased (i.e .dhx_scheduler_month) So when both have the same size,then UI will look proper.
I have generate the same issue in the below snippet.
I have removed the div scroll, Now I want the scroll for the body.
Sorry for the multiple responses,
Please follow below URl and try to change the height of dhx_cal_container from the html code. I have kept it 1000px. Please try to change and you will find that every time your increase the height of main container ( .dhx_cal_container) will also increase the size of every day boxes.
Hello @jaypal999,
As you posted a few questions I will try to answer them one by one:
Yes, I am talking about that issue. Actually the smaller container as you see in the screenshot is the “.dhx_scheduler_month container” I have tried to set the height for that container. but it also changes the height of the “table” (.dhx_cal_data).
This behavior is normal, as the dhx_cal_data(table) obtains all available space in the container, to avoid empty space situation.
What I really want is, I want to add body scroll for the month view and not the table scroll which is default provided by the dhtmlx scheduler month view.
I answered it in the documentation, but will repeat it here, шf somebody will search the same:
The “table” scroll you talking about, is the scroll of the “dhx_cal_data” element if you want to remove it and add a scrollbar to the scheduler container “dhx_cal_container”, you can do it with the following ruleset:
.dhx_scheduler_month{
overflow-y: scroll;
}
.dhx_scheduler_month .dhx_cal_data {
overflow: visible;
}
Here is a demo(HTML tab):
http://snippet.dhtmlx.com/5/c2973ff49
Please follow below URl and try to change the height of dhx_cal_container from the html code. I have kept it 1000px. Please try to change and you will find that every time your increase the height of main container ( .dhx_cal_container) will also increase the size of every day boxes.
http://snippet.dhtmlx.com/5/59b5b8943
It’s correct behavior, as the height of cells is calculated based on the scheduler’s container sizes. You can make it fixed through CSS, with dhx_month_body and dhx_month_head classes, but if you will set fixed height of the cells, they won’t be resized base on events count.
If I missed something and you still have some issues or unclear moments, feel free to ask it.
@Siarhei, This is working exactly what I really need.
Thank you so much, this will resolve all my issues.