{"id":12521,"date":"2024-06-18T15:21:26","date_gmt":"2024-06-18T12:21:26","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12521"},"modified":"2024-06-18T15:21:26","modified_gmt":"2024-06-18T12:21:26","slug":"combine-fixed-headers-container-autoresize-dhtmlx-scheduler","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/combine-fixed-headers-container-autoresize-dhtmlx-scheduler\/","title":{"rendered":"How to Combine Fixed Headers and Container Autoresize in DHTMLX Scheduler"},"content":{"rendered":"

“Great things are done by a series of small things brought together” – these are the words of Vincent Van Gogh, and they perfectly capture the essence of the development process. However, web developers frequently get stuck on some small things and lose their valuable time. To save your efforts with DHTMLX libraries, we want to start sharing tips that shed light on the proper usage of certain API elements.<\/p>\n

We start with discussing how to fix the headers at the top of the DHTMLX JavaScript Scheduler<\/a> with the enabled container_autoresize<\/strong> extension.<\/p>\n

What is the Issue<\/h5>\n

When using the container_autoresize <\/strong>extension in DHTMLX Scheduler, the scheduler component resizes itself to fit all the content. This can cause Scheduler to exceed the screen size, resulting in scrollbars appearing on the outer container or the page itself. This behavior ensures that the content is visible without internal scrolling. But here comes a challenge: the navigation and time headers scroll out of view when the page is scrolled down like in this example<\/a>.<\/p>\n

\"dhtmlx-scheduler-not-fixed-headers\" Check the sample ><\/a><\/p>\n

Let’s go through a few steps that can help with this issue.<\/p>\n

CSS for Sticky Position<\/h5>\n

To keep the headers fixed, we’ll use position: sticky<\/strong> for the header elements. This ensures that the headers stay in place while the rest of the content scrolls. Here\u2019s the necessary CSS:<\/p>\n

<<\/span>style><\/span>
\n
\n  .dhx_cal_container<\/span>{<\/span>
\n      overflow:<\/span> visible!<\/span>important;<\/span>
\n  }<\/span>
\n  .dhx_cal_navline<\/span>,<\/span>
\n  .dhx_cal_header<\/span> {<\/span>
\n      position:<\/span> sticky;<\/span>
\n      z-<\/span>index:<\/span> 10<\/span>;<\/span>
\n      background:<\/span>var<\/span>(<\/span>--<\/span>dhx-<\/span>scheduler-<\/span>container-<\/span>background)<\/span>;<\/span>
\n   
\n  }<\/span>
\n  .dhx_cal_navline<\/span>{<\/span>
\n      z-<\/span>index:<\/span> 11<\/span>;<\/span>
\n      top:<\/span>0<\/span>;<\/span>
\n  }<\/span>
\n  .dhx_cal_header<\/span>{<\/span>
\n      \/* top coordinate is assigned from JS *\/<\/span>
\n      margin-<\/span>left:<\/span> -<\/span>1px;<\/span>
\n      box-<\/span>shadow:<\/span> 0<\/span> 1px 0px 0px var<\/span>(<\/span>--<\/span>dhx-<\/span>scheduler-<\/span>base-<\/span>colors-<\/span>border)<\/span>;<\/span>
\n  }<\/span>
\n
\n<\/<\/span>style><\/span><\/div><\/div>\n

In this CSS, position: sticky<\/strong> is applied to both the .dhx_cal_navline<\/strong> and .dhx_cal_header elements<\/strong>. Pay attention to the usage of theme css variables for the background<\/strong> and box-shadow<\/strong> properties. This is essential for maintaining consistent styles with the rest of the Scheduler across all themes. <\/p>\n

As for the positioning, let\u2019s set top: 0<\/strong> for the .dhx_cal_navline<\/strong> element since it is the topmost element of the scheduler.<\/p>\n

The .dhx_cal_header<\/strong> element, which should be displayed directly below the navigation line, also uses position: sticky<\/strong>. However, its top position needs to be dynamically set using JavaScript to account for the varying height of the .dhx_cal_navline<\/strong>.<\/p>\n

JavaScript for Dynamic Positioning<\/h5>\n

Now you need to dynamically set the top position of the time header based on the height of the navigation panel. For this purpose, use the onViewChange<\/strong> API event of DHTMLX Scheduler:<\/p>\n

scheduler.attachEvent<\/span>(<\/span>"onViewChange"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n   const<\/span> navBar =<\/span> scheduler.$container.querySelector<\/span>(<\/span>".dhx_cal_navline"<\/span>)<\/span>;<\/span>
\n   const<\/span> header =<\/span> scheduler.$container.querySelector<\/span>(<\/span>".dhx_cal_header"<\/span>)<\/span>;<\/span>
\n   if<\/span>(<\/span>navBar &&<\/span> header)<\/span>{<\/span>
\n       header.style<\/span>.top<\/span> =<\/span> `${<\/span>navBar.offsetHeight<\/span>}<\/span>px`;<\/span>
\n   }<\/span>
\n
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

At this stage, you capture the scheduler repaints. Each time a repaint occurs, you take the current height of the navigation bar and set it as the top coordinate for the .dhx_cal_header<\/strong> element. This dynamic positioning keeps the time header right below the navigation panel, regardless of its height.<\/p>\n

These are the main steps that will help keep the headers of your JavaScript scheduling calendar visible when the page is scrolled down. Use this sample<\/a> to see how it works in practice.<\/p>\n

Related Materials<\/h5>\n

\"dhtmlx-scheduler-fixed-headers\"Check the sample ><\/a><\/p>\n