making Timeline section fixed

Hi ,
I have a scheduler page with timeline days mode , and I have made the width of the to 170% so that it can occupy more units in x-axis , as my time interval is so less . when i scrolling through the x-axis the section also getting moved and the user cant identify which section it belongs to .
How can i make the section ( days ) in timeline days mode to fixed ?

please suggest me about this requirement

thank you .

currently there is no quick solution for this. The basic approach is following

  • you can put scheduler inside a container with fixed width and overflow:auto, so you could get horizontal scroll by setting scheduler a bigger width.
  • in order to make navigation panel visible, you can hide the default one and display current date and view buttons manually via public api on top of the fixed container.
  • because of the current implementation, the first column can’t be fixed that easily. A possible workaround would be to render it manually from code and place inside a scheduler container using absolute positioning, so scheduler will be scrolled independently from this column


I did this by injecting custom section as html into the scheduler container

function _build_custom_sectionbar() {
    var state = scheduler.getState();
    var datFrom = new Date(state.min_date);
    var datTo = new Date(state.max_date);
    var strDisplaySection = 'block';
        strDisplaySection = 'none';
    var timeline = scheduler.matrix[state.mode];
    var strForm  = "<div id='divSchedulerLeftSections' style='left:"+glblLeft+"px!important;display:"+strDisplaySection+";'><table id='tblSchdulerSections'>";
    if (timeline) {
        while (+datFrom < +datTo) {
            var strSectionTitle = '<div style="float: left; width: 50% ! important; margin-left: 10%;">'+datFrom.dateFormat('d-m-Y')+'</div><div style="float: left; width: 35% ! important;text-align: left;">'+datFrom.dateFormat('l')+'</div>';
            datFrom =, 1, 'day');
        strForm +='</table></div>';
        if($('#divSchedulerLeftSections').length ==0){

And called this function in any of the timeline template function so that it called automatically for each state change.

scheduler.templates.day_date = function(date){

And dynamically changed the left position

$(window).scroll(function (){
       glblLeft = window.scrollX;
       if(window.scrollX >=199) {
       else if(window.scrollX <199){

its working perfect , but it will cause any problem ?

Thank you :slight_smile: