스케일 설정하기

스케일은 scales 속성을 통해 설정할 수 있습니다. scales 배열에 스케일 객체를 추가하여 여러 개의 스케일을 정의할 수 있습니다:

// 단일 일(day) 스케일
gantt.config.scales = [
    {unit: "day", step: 1, format: "%j, %D"}
];

// 여러 개의 스케일을 동시에 설정
gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
    {unit: "week", step: 1, format: weekScaleTemplate},
    {unit: "day", step:1, format: "%D", css:daysStyle }
];

시간 스케일(X축)의 다음과 같은 속성들을 조정할 수 있습니다:

1. Unit
2. Range
3. Step
4. Height
5. Format
6. Style

또한 사용자 정의 스케일을 추가하는 것도 가능합니다.

시간 단위

스케일의 단위를 정의하려면 스케일 객체에서 unit 속성을 사용하세요.

사용 가능한 값은 "minute", "hour", "day"(기본값), "week", "quarter", "month", "year"입니다.

gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
    {unit: "day", step: 1, format: "%j, %D"}
];

gantt.init("gantt_here");

Month view

범위

기본 범위 설정

날짜 범위가 명시적으로 지정되지 않은 경우, Gantt는 로드된 작업의 날짜를 기준으로 스케일의 첫 번째 작업 이전과 마지막 작업 이후에 오프셋을 추가하여 범위를 결정합니다. 이 오프셋은 시간 스케일 설정에 따라 달라집니다.
scale_offset_minimal 값에 따라, 오프셋은 scales 옵션의 unit 속성에 정의된 시간 단위이거나, 시간 스케일에서 가장 작은 단위가 됩니다.

현재 표시되고 있는 날짜 범위는 getState 메서드를 사용하여 프로그래밍적으로 가져올 수 있습니다.

var state = gantt.getState();

console.log(state.min_date);
// -> Mon Jan 01 2018 00:00:00

console.log(state.max_date);
// -> Tue Jan 01 2019 00:00:00

스케일 범위는 gantt 렌더링 시 재계산됩니다. 사용자가 작업을 현재 보이는 시간 범위 밖으로 이동시키면, 작업 행은 계속 표시되지만 바 요소는 전체 차트가 다시 그려질 때까지 나타나지 않습니다.

스케일이 자동으로 조정되도록 하려면 fit_tasks 옵션을 활성화하세요.

gantt.config.fit_tasks = true; 
gantt.init("gantt_here");

Auto resize scale

날짜 범위 명시적으로 설정하기

또는 start_date 및 end_date 옵션을 사용하여 날짜 범위를 명시적으로 지정할 수 있습니다:

gantt.config.start_date = new Date(2018, 02, 31);
gantt.config.end_date = new Date(2018, 03, 09);
 
gantt.init("gantt_here");

이 날짜들은 gantt 초기화 시 직접 지정할 수도 있습니다:

gantt.init("gantt_here", new Date(2018, 02, 31), new Date(2018, 03, 09));

Define displayed date range

정의된 간격을 벗어난 작업들은 미예약 작업으로 표시되지 않는 한 Gantt 차트에 나타나지 않습니다.

Show Unscheduled Tasks

참고

start_date와 end_date가 모두 설정되어 있고, 이 범위를 벗어난 작업을 추가하면 해당 작업은 차트에 표시되지 않습니다.
이러한 작업을 표시하려면 show_tasks_outside_timescale 옵션을 활성화하세요.

gantt.config.start_date = new Date(2019, 02, 31);
gantt.config.end_date = new Date(2019, 03, 09);
gantt.config.show_tasks_outside_timescale = true;

gantt.init("gantt_here");

이 옵션을 사용하지 않는 경우, 날짜 범위를 동적으로 확장할 수 있습니다:

gantt.attachEvent("onLightboxSave", function(id, task, is_new){
 var taskStart = task.start_date;
 var taskEnd = task.end_date;
 var scaleStart = gantt.config.start_date;
 var scaleEnd = gantt.config.end_date;

 // 작업이 범위를 벗어난 경우
 if(scaleStart > taskEnd || scaleEnd < taskStart ){
  // 타임스케일 범위 업데이트
  gantt.config.end_date = new Date(Math.max(taskEnd.valueOf(), scaleEnd.valueOf()));
  gantt.config.start_date = new Date(Math.min(taskStart.valueOf(), scaleStart.valueOf()));
  gantt.render();
 }    
 return true;
});

또는 라이트박스에서 작업이 범위를 벗어나 저장되지 않도록 검증을 추가할 수 있습니다:

gantt.attachEvent("onLightboxSave", function(id, task, is_new){
     var taskStart = task.start_date;
     var taskEnd = task.end_date;
     var scaleStart = gantt.config.start_date;
     var scaleEnd = gantt.config.end_date;

    // 작업이 범위를 벗어났는지 확인
    if(scaleStart > taskEnd || scaleEnd < taskStart ){
        gantt.message({
            type: "warning", 
            text: "Warning! The task is outside the date range!",
            expire: 5000
        });
        return false;
    } 
    return true;
});

표시 범위 동적으로 변경하기

표시되는 날짜 범위를 실시간으로 업데이트하는 방법에는 몇 가지가 있습니다:

• start_date 및 end_date 설정을 사용하여 시간 범위를 제어하고, 로드된 작업을 기준으로 동적으로 업데이트합니다.
  이 작업은 스케일 범위 재계산 후 gantt가 렌더링되기 전에 start_date와 end_date를 업데이트하여 수행할 수 있습니다:

gantt.attachEvent("onBeforeGanttRender", function(){
   var range = gantt.getSubtaskDates();
   var scaleUnit = gantt.getState().scale_unit;
   if(range.start_date && range.end_date){
     gantt.config.start_date = gantt.calculateEndDate(range.start_date, -4, scaleUnit);
     gantt.config.end_date = gantt.calculateEndDate(range.end_date, 5, scaleUnit);
   }
});

gantt.init("gantt_here");

• 작업이 현재 스케일 구간을 벗어날 때마다 스케일이 다시 렌더링되도록 하려면 fit_tasks 속성을 true로 설정하세요:

gantt.config.fit_tasks = true; 
gantt.init("gantt_here");

start_date와 end_date가 모두 설정된 경우, fit_tasks 옵션이 제대로 작동하려면 위에서 설명한 방법 중 하나를 반드시 사용해야 합니다.

• onTaskDrag 이벤트 핸들러 내에서 논리를 추가하여 작업을 드래그하는 동안 스케일을 동적으로 업데이트할 수도 있습니다:

gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
 var state = gantt.getState();
 var minDate = state.min_date,
       maxDate = state.max_date;
  
 var scaleStep = gantt.date.add(new Date(), state.scale_step, state.scale_unit) - new Date();
  
 var showDate,
  repaint = false;
  if(mode == "resize" || mode == "move"){
    if(Math.abs(task.start_date - minDate) < scaleStep){
      showDate = task.start_date;
      repaint = true;
      
    } else if(Math.abs(task.end_date - maxDate) < scaleStep){
      showDate = task.end_date;
      repaint = true;
    }
    
    if(repaint){
      gantt.render();
      gantt.showDate(showDate);
    }
  }
});

Related example: Re-rendering Scale during Task Dragging

명시적 날짜 범위를 벗어난 작업 표시

지정된 날짜 범위를 벗어나는 작업도 Gantt 차트에서 표시할 수 있습니다.

이를 위해 show_tasks_outside_timescale 옵션을 true로 설정하세요:

var data = {
  "tasks": [
    {"id":1, "text":"Project #1", "start_date": "01-09-2018", "end_date": "02-09-2018"},
    {"id":2, "text":"Project #2", "start_date": "01-09-2021", "end_date": "02-09-2021"},
    {"id":3, "text":"Task #1", "start_date": "03-02-2020", "end_date": "05-02-2020"},
    ],
    "links":[]
};

gantt.config.show_tasks_outside_timescale = true;

gantt.init("gantt_here", new Date(2020, 1, 1), new Date(2020, 2, 1));

Tasks outside timescale

이렇게 하면, ID가 "1"과 "2"인 작업이 타임라인 영역에 빈 행으로 나타나며, 그리드에 이름과 시작일이 표시됩니다.

Time step

시간 스케일의 스텝 크기를 정의하려면 스케일 구성 객체의 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");

Step config for the Quarter scale

Height

스케일의 높이를 조정하려면 scale_height 속성을 사용하세요:

gantt.config.scale_height = 54; /*!*/

gantt.init("gantt_here");

Day hours

여러 개의 스케일이 사용되는 경우, 지정한 높이는 각 스케일에 균등하게 분배됩니다. 예를 들어 scale_height가 60 픽셀이고, 3개의 스케일이 있다면 각각 20 픽셀의 높이를 가지게 됩니다.

Date format

노트

사용 가능한 포맷 문자에 대해 알아보려면 날짜 형식 지정 문서를 참고하세요

각 스케일 객체의 format 속성을 사용해 날짜 포맷을 설정할 수 있습니다. 이 속성은 문자열일 수도 있고:

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

Multiple scales

또는 날짜 객체를 받아 포맷 문자열을 반환하는 함수일 수도 있습니다:

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

" + dateFormat(date);
  }}
]

Custom scales

Styling

시간 스케일 셀을 스타일링하려면 스케일 객체의 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"; 
         } 
    }} 
];

Related example: Styling of cells of the time scale

css 속성이 스케일 설정에 지정되지 않은 경우, scale_cell_class 템플릿을 사용해 scales 배열의 첫 번째 시간 스케일에 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"}
];

gantt.templates.scale_cell_class = function(date) {
         if(!gantt.isWorkTime(date)){
             return "week-end";
         }
};

Related example: Styling of the first time scale

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; /*!*/

Related example: Styling of all scales

근무 시간 계산과 함께 사용할 때는 하드코딩된 값 대신 isWorkTime을 사용하는 것이 좋습니다:

gantt.config.work_time = true;

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

타임라인 영역의 스타일을 더 맞춤화하는 방법은 타임 슬롯 하이라이트하기 문서를 참고하세요.

Custom time units

dhtmlxGantt에서는 사용자 정의 시간 단위를 생성하고, 스케일 구성에서 라벨 템플릿을 설정할 수 있습니다.

사용자 정의 단위를 정의하려면 Date 객체에 두 개의 함수를 구현하세요:

Date gantt.date.<unit>_start(Date date);
Date gantt.date.add_<unit>(Date date, Integer increment);

• 첫 번째 함수는 주어진 날짜에 대해 시간 단위의 시작 날짜를 반환합니다(예: month_start의 경우 2월 14일 → 2월 1일).
• 두 번째 함수는 날짜에 지정한 수만큼 단위를 더합니다(예: 2일 빼기 등).

노트

일반적으로 증분 값은 양수입니다. 스케일 셀은 왼쪽에서 오른쪽으로 생성되기 때문입니다. 하지만 첫 번째 셀은 오른쪽에서 왼쪽으로 생성되므로, Gantt는 이 경우 음수 증분 값을 사용합니다.

예시 1

다음은 회계 연도가 1월 31일에 종료된다고 가정할 때 "fiscal_year" 단위를 정의하는 방법입니다. 새로운 단위를 지정하는 방법은 다음과 같습니다:

var firstMonth = 1,
    firstDay = 1;

gantt.date.fiscal_year_start = function(date){       /*!*/
   var next = new Date(date);
   if(next.getMonth() < firstMonth || 
      (next.getMonth() === firstMonth && next.getDate() < firstDay)){
      next = gantt.date.add(next, -1, "year"); 
   }
  
  next = gantt.date.year_start(next);
  next.setMonth(firstMonth);
  next.setDate(firstDay);
 
  return next;
}; 

gantt.date.add_fiscal_year = function(date, inc){    /*!*/
   return gantt.date.add(date, inc, "year");
};

이제 코드는 다음과 같이 사용할 수 있습니다:

var dateToStr = gantt.date.date_to_str("%Y");
function fiscalYearLabel(date){
    return dateToStr(gantt.date.fiscal_year_start(date));
};

gantt.config.scales = [
  {unit:"year", step:1, format:"Calendar year %Y"},
  {unit:"fiscal_year", step:1, format:fiscalYearLabel},
  {unit:"month", step: 1, format: "%M %Y"},
  {unit:"day", step: 1, format:"%d %M"}
];

예시 2

각 "day" 셀을 00, 08, 16으로 표시된 세 개의 "hour" 셀로 분할할 수 있습니다. 로직은 다음과 같습니다:

gantt.date.hour_custom_start = function (date) {
    return date;
};

gantt.date.add_hour_custom = function (date, inc) { // inc depends on the "step" 
    const nextDate = new Date(date);
    if (nextDate.getHours() % 8 != 0) { // the hour value is not 0, 8 or 16 /*!*/
        const diff = Math.abs(8 - nextDate.getHours()); /*!*/
        return gantt.date.add(nextDate, diff * inc, "hour"); /*!*/
    } /*!*/
    return gantt.date.add(date, 8 * inc, "hour"); /*!*/
};

gantt.config.scales = [
    { unit: "day", step: 1, date: "%d %F" },
    { unit: "hour_custom", step: 1, date: "%H" },
];

gantt.config.date_grid = "%Y-%m-%d %H:%i"

Related example: Custom hours on the scale

Gantt가 첫 번째 "hour" 셀을 어떻게 결정하는지 이해하려면, 가장 이른 작업이 07:00에 시작된다고 가정해 봅니다. 7은 8의 배수가 아니므로, Gantt는 다음 규칙을 적용합니다:

if (nextDate.getHours() % 8 != 0) {
    const diff = Math.abs(8 - nextDate.getHours());  // 8 - 7 = 1
    return gantt.date.add(nextDate, diff * inc, "hour"); // 7 - 1 = 6
} 

• Gantt는 8:00과 7:00 사이의 시간 차이를 계산합니다:

diff = 08:00 - 07:00 = 1 hour

• 그런 다음 이 차이를 증가 값과 곱합니다:

diff * inc = 1 hour * (-1) = -1 hour

여기서 inc는 시간 단계의 음수 값(-1)입니다.

• 마지막으로, 이 값을 가장 이른 작업 시간에 더합니다:

07:00 + (- 1 hour) = 06:00

첫 번째 셀의 값은 06이 됩니다.

두 번째 "hour" 셀에는 양의 증가 값이 적용되어 동일한 논리가 적용됩니다:

• diff = 08:00 - 06:00 = 2 hours

• diff * inc = 2 hour * 1 = 2 hours

• 06:00 + 2 hours = 08:00

두 번째 셀에는 08이 표시됩니다.

8은 8의 배수이므로, 다음 셀은 단순히 08:00 + 8 hours = 16:00으로 계산되며, 이후 셀도 이 패턴이 반복됩니다.

노트

이 접근 방식은 date range isn’t specified explicitly일 때 동작합니다.

더 많은 예시는 How to add a custom scale 문서를 참고하세요.

커스텀 시간 범위

이 섹션에서는 근무하지 않는 시간대를 표시하거나 숨기도록 시간 스케일을 커스터마이즈하는 예시를 제공합니다. 또한 skip_off_time 모드가 활성화되어 있을 때 스케일 시작 부분에 근무 외 시간 셀을 숨기는 예시도 포함되어 있습니다.

다음은 08:0012:00, 13:0017:00의 일반적인 근무 시간대에 맞춘 커스텀 스케일 예시입니다:

gantt.date.day_custom_start = function (date) {
    return date;
};

gantt.date.add_day_custom = function (date, inc) { /*!*/
    const nextDate = new Date(date); /*!*/
    if (nextDate.getHours() < 8) { /*!*/ // Statement 1
        const diff = 8 - nextDate.getHours(); /*!*/
        return gantt.date.add(nextDate, diff * inc, "hour"); /*!*/
    } /*!*/
    if (nextDate.getHours() == 8) { /*!*/ // Statement 2
        return gantt.date.add(nextDate, 9 * inc, "hour"); /*!*/
    } /*!*/
    if (nextDate.getHours() == 17) { /*!*/ // Statement 3
        return gantt.date.add(nextDate, 15 * inc, "hour"); /*!*/
    } /*!*/

    return gantt.date.add(date, 8 * inc, "hour"); /*!*/
};

gantt.config.scales = [
    { unit: "day_custom", step: 1, date: "%d %H:00" },
];

// gantt.config.skip_off_time = true;
gantt.config.work_time = true;
gantt.config.correct_work_time = true;
gantt.plugins({
    auto_scheduling: true,
});
gantt.setWorkTime({ hours: ["8:00-12:00", "13:00-17:00"] }); /*!*/

gantt.config.duration_unit = "minute";
gantt.config.duration_step = 1;
gantt.config.time_step = 1;
gantt.config.round_dnd_dates = false;

Related example: Custom time spans

가장 이른 작업이 2025년 4월 1일 08:00에 시작된다고 가정해 봅니다. gantt.config.skip_off_time 설정에 따라 Gantt가 이 작업 이전에 오프셋을 어떻게 추가하는지 살펴보겠습니다.

근무 외 시간을 숨기는 설정부터 시작합니다:

gantt.config.skip_off_time = true;

이 경우, 첫 번째 "hour" 셀을 만들기 위해 Gantt는 가장 이른 작업 시간에서 이전 근무 시간에 도달할 때까지 시간을 빼게 됩니다.

• 먼저, 2025년 4월 1일 08:00에서 9시간을 뺍니다(Statement 2):

08:00 - 9 hours = 23:00

• 23:00은 근무 외 시간이며 어떤 조건도 만족하지 않으므로, Gantt는 8시간을 더 뺍니다:

23:00 - 8 hours = 15:00

• 결과적으로 2025년 3월 31일 15:00이 근무 시간에 해당합니다.

따라서 첫 번째 셀에는 31 15:00이 표시됩니다.

다른 셀의 계산 방법을 이해하려면 gantt.config.skip_off_time을 비활성화해 보세요:

gantt.config.skip_off_time = false;

이 경우에도 첫 번째 셀은 31 15:00으로 동일하지만, 근무 외 시간이 표시되어 가장 이른 작업 전에도 더 많은 빈 셀이 나타납니다.

이 셀들에 대해서는 다음 로직이 적용됩니다:

• 2025년 3월 31일 15:00은 근무 시간이므로, 두 번째 셀은 8시간을 더해 계산합니다:

15:00 + 8 hours = 23:00

• 2025년 3월 31일 23:00은 근무 외 시간이므로, 세 번째 셀은:

23:00 + 8 hours = 7:00

• 2025년 4월 1일 7:00은 근무 외 시간이면서 8:00 미만(Statement 3)이므로, 다음과 같이 계산합니다:

  • diff = 08:00 - 07:00 = 1 hour
  • diff * inc = 1 hour * 1 = 1 hour
  • 07:00 + 1 hour = 08:00

2025년 4월 1일 08:00은 가장 이른 작업의 시작 시간과 일치합니다.

노트

다른 셀도 유사하게 생성됩니다.

skip_off_time이 비활성화된 경우, Gantt는 가장 이른 작업 전에도 여러 개의 빈 셀을 추가할 수 있습니다. 이 설정과 상관없이 항상 하나의 셀만 나타나도록 하려면 다음과 같은 로직을 사용할 수 있습니다:

gantt.date.add_day_custom = function (date, inc) {
    // work_time이 활성화되고 작업이 로드된 경우,
    // 첫 번째 셀 날짜를 계산합니다.
    // 최소 날짜부터 시작하여 뒤로 이동하면서,
    // 가장 가까운 근무 시간 내 날짜를 찾은 후
    // 그 날짜에서 1시간을 뺍니다
    if (inc < 0 && gantt.getTaskByTime().length) {
        return gantt.calculateEndDate({ 
            start_date: date, duration: -1, unit: gantt.config._duration_unit 
        })
    }

    // 근무 시간(근무일)의 시작;
    // 근무일이 끝나는 시점 계산
    if (date.getHours() == 8) {
        return gantt.calculateEndDate(date, 8);
    }
    // 근무 시간(근무일)의 끝;
    // 다음 근무일이 시작되는 시점 계산
    if (date.getHours() == 17) {
        return gantt.date.add(date, 15 * inc, "hour");
    }

    // 작업이 로드된 경우, 두 번째 스케일 셀의 근무 날짜를 계산
    // 작업이 없는 경우, 모든 스케일 셀의 날짜를 계산
    date = gantt.date.add(date, 1 * inc, "day");
    gantt.date.day_start(date);
    date = gantt.getClosestWorkTime({ date, dir: "future" })
    return date
};

gantt.config.scales = [
    { unit: "day_custom", step: 1, date: "%d %H:%i" },
];
gantt.config.work_time = true;

gantt.config.skip_off_time = false; /*!*/

Related example: Equal offset for custom scales

근무 외 시간이 숨겨진 경우 스케일은 다음과 같이 표시됩니다:

근무 외 시간이 표시되는 경우(gantt.config.skip_off_time 비활성화):

무한 스크롤

타임라인에서 무한 스크롤을 구현하는 자세한 예시는 관련 문서에서 확인할 수 있습니다.

고정 라벨(Sticky labels)

버전 9.0부터 시간 스케일 라벨은 기본적으로 고정(sticky)됩니다. 즉, 셀의 너비가 라벨보다 훨씬 넓을 때도 타임라인을 스크롤하는 동안 라벨이 뷰포트에 고정되어 자연스럽게 사라질 때까지 계속 표시됩니다. 이 기능은 확대/축소 시에도 스케일 라벨이 항상 잘 보이도록 도와줍니다.

라벨이 셀 중앙에 위치하고 스크롤 시 고정되지 않던 이전 동작이 더 필요하다면, 스케일의 sticky 속성을 false로 설정하면 됩니다:

gantt.config.scales = [
  {unit: "year", step: 1, format: "%Y", sticky: false},
  {unit: "month", step: 1, format: "%F", sticky: false},
  {unit: "day", step: 1, format: "%j", sticky: false}
];
gantt.init("gantt_here");

반대로, 셀 너비와 상관없이 특정 스케일에 대해 라벨 고정이 항상 적용되게 하려면 sticky: true로 설정하면 됩니다. 이 경우 라벨이 셀보다 좁아도 항상 고정됩니다:

gantt.config.scales = [
  {unit: "year", step: 1, format: "%Y", sticky: true},
  {unit: "month", step: 1, format: "%F", sticky: true},
  {unit: "day", step: 1, format: "%j", sticky: true}
];
gantt.init("gantt_here");