making Timeline section fixed

Scheduler Javascript
#1

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 .

#2

Hi,
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
#3

Hi

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';
    if(glblLeft<=198){
        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>';
            strForm+='<tr><td>'+strSectionTitle+'</td></tr>';
            datFrom = scheduler.date.add(datFrom, 1, 'day');
        }
        strForm +='</table></div>';
        if($('#divSchedulerLeftSections').length ==0){
            $('.dhx_cal_data').append(strForm);
        }
    }
}

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){
        _build_custom_sectionbar()
}

And dynamically changed the left position

$(window).scroll(function (){
       glblLeft = window.scrollX;
       $('#divSchedulerLeftSections').css('left',window.scrollX);                   
       if(window.scrollX >=199) {
           $('#divSchedulerLeftSections').fadeIn("slow");
       }
       else if(window.scrollX <199){
           $('#divSchedulerLeftSections').fadeOut("slow");
       }
    });

its working perfect , but it will cause any problem ?

Thank you :slight_smile: