Second Scale for months quarterly

Scheduler
#1

Hi there, I’m trying to achieve second scale with months group in quarter.

Below is an example for each month and want to change it to quarterly. Please help!!!

scheduler.locale.labels.timeline_tab = “Timeline Day”;
scheduler.locale.labels.mTimeline_tab = “Timeline Month”;
scheduler.locale.labels.section_custom=“Section”;
scheduler.config.xml_date="%Y-%m-%d %h:%i";

var sections=[
{key:1, label:“Res1”},
{key:2, label:“Res2”}
];

scheduler.createTimelineView({
name: “timeline”,
x_unit: “week”,
x_date: “%j %D”,
x_step: 1,
x_size: 26,
x_start: 0,
x_length: 25,
y_unit:
[{key:1, label:“Room 1”},
{key:2, label:“Room 2”},
{key:3, label:“Room 3”}],
y_property:“room_id”,
dx: 75, // sets width of resource column
render:“bar”,
second_scale:{
x_unit: “month”,
x_date: “%M”
}
});

// set schedule to current day
var d = new Date();
var year1 = d.getFullYear();
var month1 = d.getMonth();
var day1 = d.getDate();

// month timeline
//scheduler.config.m_tab(‘scheduler_here’, new Date(year1, month1, day1), “mTimeline”);

//===============
//Data loading
//===============
scheduler.config.lightbox.sections=[
{name:“description”, height:130, map_to:“text”, type:“textarea” , focus:true},
{name:“custom”, height:23, type:“select”, options:sections, map_to:“section_id” },
{name:“time”, height:72, type:“time”, map_to:“auto”}
];
scheduler.init(‘scheduler_here’,new Date(2012,08,17),“timeline”);
scheduler.parse([
{text:“Conference”, start_date:“2012-09-17 12:00”, end_date:“2012-09-17 14:00”,
room_id:“1”},
{text:“Meeting”, start_date:“2012-09-17 09:00”, end_date:“2012-09-17 12:00”,
room_id:“1”},
{text:“Conference”, start_date:“2012-09-17 14:00”, end_date:“2012-09-17 16:00”,
room_id:“1”}
],“json”);

#2

Hi @Jasdeep,
unfortunately, there is no built-in method to set the second scale as a quarter. But it is possible to implement it with your own code. In order to do this, please change the name of the second scale date via timeline_second_scale_date:

function quarterStart (date) {
var monthNumber = date.getMonth();
var quater;
if (monthNumber >= 0 && monthNumber < 3) {
quater = "Q1";
} else if (monthNumber >= 3 && monthNumber < 6) {
quater = "Q2";
} else if (monthNumber >= 6 && monthNumber < 9) {
quater = "Q3";
} else {
quater = "Q4";
}
return quater;
}

Then you need to get the number of the first month of your scale and change the width of the elements for each three month:

function changeWidth(node) {
var scaleFirstMonthNumber = 
scheduler.matrix.timeline._trace_x[0].getMonth();
var quarterWidth = {};
Array.from(node).forEach((item) => {
var quarter = item.innerHTML;
var width = item.style.width.match(/\d/g).join('');
quarterWidth[quarter] = (quarterWidth[quarter]) ? quarterWidth[quarter] += 
+width : +width;
});

var mat = (Math.floor(scaleFirstMonthNumber/3) + 1) * 3 - 
scaleFirstMonthNumber;
node[0].style.width = quarterWidth[node[0].innerHTML] + "px";
node[0].style.zIndex =2000; 
for (var i=mat; i < 11 - mat; i = i+3) {
if (node[i]) {
node[i].style.width = quarterWidth[node[i].innerHTML] + "px";
node[i].style.zIndex = 2000;
}
}  
}

I’ve made a quick demo that shows how it can be implemented:
http://snippet.dhtmlx.com/5/b456d17bb
Please, note that the width of timeline_second_scale_date must be changed every time the Timeline view is rendered when onAfterSchedulerResize or onViewChange fires.
API onAfterSchedulerResize:
https://docs.dhtmlx.com/scheduler/api__scheduler_onschedulerresize_event.html
API onViewChange:
https://docs.dhtmlx.com/scheduler/api__scheduler_onviewchange_event.html

#3

Hi @Ales
Thanks very much for the help.
Can you please advise what is " scheduler.matrix.timeline._trace_x[0].getMonth(); " inside changeWidth. I’m unable to get this value.

Also I’ve changed the view to show months -
scheduler.createTimelineView({
name: “timeline”,
x_unit: “month”,
x_date: “%M”,
x_step: 1,
x_size: 12,
x_start: 0,
x_length: 12,
y_unit: sections,
y_property: “section_id”,
render:“bar”,
// second scale should be quarters, we will use
// scheduler.templates.timeline_scale_date
// to set the quarter string, but cannot apply
// steps!!!
second_scale:{
x_unit: “month”,
x_date: “%M”,
x_step: 3
}
});