半岛外围网上直营

这篇文章给大家带来dhtmlxGantt日期样式和格式设置的讲解。

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    欢迎进群交流讨论

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