Can I customize the X-Axis on a timeline view?


#1

Hi I am trying to customize the X-Axis on a timeline view so I would like to create a link on every column header to another view. For example, in a week timeline view, I would like to click on the date at the header and this will show a day timeline view for that day.

Thanks.


#2

Hi @fernandof,

Yes, you should dynamically update configurations of createTimelineView() method using matrix object when you click on a date on X-axis and onXScaleClick handler fires
https://docs.dhtmlx.com/scheduler/timeline_view.html#dynamicshangeofproperties

So, the code to implement it can look like:

scheduler.attachEvent("onXScaleClick", function (index, targetDate,e){
  setDayTimelineView(targetDate);
});

function setDayTimelineView(targetDate){  
  var timeline = scheduler.matrix.timeline;

  timeline.x_date =	"%j %D";    
  timeline.x_size = 1;
  timeline.x_length = 1; 

  scheduler.templates.timeline_scale_date = function(date){
    var func=scheduler.date.date_to_str(timeline.x_date);
    return func(date);
  };

  scheduler.setCurrentView(targetDate);
}

Use the link to check the demo that demonstrates how it works:
http://snippet.dhtmlx.com/622071648


#3

Hi Polina,

Thanks, that it was what I was looking for!

Thank you for the help.