how to change calendar height based on type?

Scheduler Javascript
#1

One has to set the height in the style for the dhx_cal_container div. I tried setting just the top and width. The calendar vanishes. So, one has to set the height. I can set the height to a percentage. But then, if the required space is less than what is specified, one gets a huge block of blue (the calendar background color) at the bottom of the view. I am probably going to set the background to white, but this just deals with one kind of symptom.

I am using a timeline by default but people also want a monthly, weekly and day calendar. One can of course do this, but one adds those inside the div.

Because of the big block block mentioned above, I calculate the vertical height needed for the timeline view. But if there are only a half dozen sections in the view, the height is not that large. Then one switches to the month view and the space requirements of the month are much larger. One gets the same short view and a large scrolling situation. Not optimal.

I cannot see a way to set the height of the dhx_cal_container to different values for the different calendar types. Is there a way to do this.

I think I have a way around this. For other reasons, I override the scheduler._on_dbl_click function (which is running with scissors, I know). I can catch the cases where the element selected is of class dhx_cal_tab and regenerate the page for the new calendar type being selected. Again, not optimal.

Any other suggestions?

I am including a cleaned-up example page. The timeline view is fine with 288px of height. I switch to the month and it wants over 1000px.

My CSS here may be lame. I know. Absolute positioning seems wrong, but I am not expert at this part of the project.
cleanedExample_source.txt.zip (1.62 KB)

#2

var scheduler_container = document.getElementById("scheduler_here"); scheduler.attachEvent("onBeforeViewChange", function(old_mode, old_date, mode, date) { if (mode == "month") { scheduler_container.style.height = "200px"; } else { scheduler_container.style.height = "400px"; } return true; });
Best regards,
Ilya

#3

This works really well.

I would suggest something. When the calendar view is configured, one sets the height in the style. One should be able to set a timelineViewHeight, a monthViewHeight, a weekViewHeight, and a dayViewHeight.

To assume that these values are the same is very rarely the correct thing to do. This would be much more clear if these 4 different values of the height are called out. It is ok if a viewHeight value can be the default for all 4, but it should be obvious that the 4 heights are different.

#4

Hello,

Thank you for the feedback.

That depends on how you use it. For now I’ve encountered different approach - we have block with X width and Y width and Scheduler should do it stuff inside. Timeline with lots of units? Go ahead, add scroll. Month view? Be sure to resize.

Kind regards,
Ilya