项目管理软件dhtmlxGantt配置教程（十一）：日期样式和格式设置

1、时间步长

要设置时间刻度的步长，请使用相应刻度对象中的step属性：

var monthScaleTemplate = function (date) {    var dateToStr = gantt.date.date_to_str("%M");    var endDate = gantt.date.add(date, 2, "month");    return dateToStr(date) + " - " + dateToStr(endDate);};gantt.config.scales = [    {unit: "year", step: 1, format: "%Y"},    {unit: "month", step: 3, format: monthScaleTemplate},    {unit: "month", step: 1, format: "%M"}];gantt.init("gantt_here");

2、高度

要设置比例的高度，请使用scale_height属性：

gantt.config.scale_height = 54;gantt.init("gantt_here");

如果您有多个比例，它们将平均共享指定的高度。例如，如果scale_height为 60 像素并且您有 3 个比例，则每个比例的高度为 60 / 3 = 20 像素。

3、日期格式

要设置比例的格式，请使用相应比例对象中的格式属性。日期的格式可以设置为字符串：

gantt.config.scales = [    {unit: "month", step: 1, format: "%F, %Y"},    {unit: "week", step: 1, format: weekScaleTemplate},    {unit: "day", step:1, format: "%D", css:daysStyle }];gantt.init("gantt_here");

或者作为一个将日期对象作为参数的函数：

gantt.config.scales = [  { unit: "day", step:1, format: function(date){    return "<strong>Day " + dayNumber(date) + "</strong><br/>" + dateFormat(date);  }}]

4、样式

要设置时间刻度的单元格样式，请使用相应刻度对象中的css属性。

function getWeekOfMonthNumber(date){    let adjustedDate = date.getDate()+date.getDay();    let prefixes = ['0', '1', '2', '3', '4', '5'];    return (parseInt(prefixes[0 | adjustedDate / 7])+1);}gantt.config.scales = [    {unit: "month", step: 1, format: "%F, %Y"},    {unit: "week", step: 1, format: function(date){       return "Week #" + getWeekOfMonthNumber(date);    }},    {unit: "day", step:1, format: "%j %D", css: function(date) {         if(!gantt.isWorkTime(date)){             return "week-end";         }    }}];

如果在scales 的配置中未指定css属性，您可以定义scale_cell_class模板以将 CSS 类应用于scales配置数组的第一次刻度。

function getWeekOfMonthNumber(date){    let adjustedDate = date.getDate()+date.getDay();    let prefixes = ['0', '1', '2', '3', '4', '5'];    return (parseInt(prefixes[0 | adjustedDate / 7])+1);}gantt.config.scales = [    {unit: "month", step: 1, format: "%F, %Y"},    {unit: "week", step: 1, format: function(date){       return "Week #" + getWeekOfMonthNumber(date);    }},    {unit: "day", step:1, format: "%j %D"}];gantt.templates.scale_cell_class = function(date) {         if(!gantt.isWorkTime(date)){             return "week-end";         }};

要将scale_cell_class模板应用于时间尺度的所有尺度，请将inherit_scale_class属性设置为true。

gantt.config.scales = [    {unit: "month", step: 1, format: "%F, %Y"},    {unit: "week", step: 1, format: function(date){       return "Week #" + getWeekOfMonthNumber(date);    }},    {unit: "day", step:1, format: "%j %D"}];gantt.templates.scale_cell_class = function(date) {         if(!gantt.isWorkTime(date)){             return "week-end";         }};gantt.config.inherit_scale_class = true;

请注意，在使用工作时间计算时，您可以使用isWorkTime而不是硬编码值：

gantt.config.work_time = true;gantt.templates.scale_cell_class = function(date){   if(!gantt.isWorkTime(date)){      return "weekend";   }};

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理控件应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及 价。

甘特图控件交流群：764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：