彩票走势图

项目管理软件dhtmlxGantt配置教程(十一):日期样式和格式设置

翻译|使用教程|编辑:秦林|2022-10-19 13:22:35.963|阅读 542 次

概述:本文给大家带来dhtmlxGantt日期样式和格式设置的讲解。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

dhtmlxgantt入门教程

这篇文章给大家带来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    欢迎进群交流讨论

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


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP