這篇文章給大家?guī)?a >dhtmlxGantt日期樣式和格式設(shè)置的講解。

DhtmlxGantt正版試用下載

1、時(shí)間步長

要設(shè)置時(shí)間刻度的步長，請使用相應(yīng)刻度對象中的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、高度

要設(shè)置比例的高度，請使用scale_height屬性：

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

如果您有多個(gè)比例，它們將平均共享指定的高度。例如，如果scale_height為 60 像素并且您有 3 個(gè)比例，則每個(gè)比例的高度為 60 / 3 = 20 像素。

3、日期格式

要設(shè)置比例的格式，請使用相應(yīng)比例對象中的格式屬性。日期的格式可以設(shè)置為字符串：

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");

或者作為一個(gè)將日期對象作為參數(shù)的函數(shù)：

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

4、樣式

要設(shè)置時(shí)間刻度的單元格樣式，請使用相應(yīng)刻度對象中的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 類應(yīng)用于scales配置數(shù)組的第一次刻度。

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模板應(yīng)用于時(shí)間尺度的所有尺度，請將inherit_scale_class屬性設(shè)置為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;

請注意，在使用工作時(shí)間計(jì)算時(shí)，您可以使用isWorkTime而不是硬編碼值：

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

dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表，可滿足項(xiàng)目管理控件應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關(guān)內(nèi)容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報(bào)價(jià)。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

更多正版甘特圖軟件下載、購買、授權(quán)咨詢，請點(diǎn)這里！