근무일 달력

막대를 드래그하다 보면 작업이 토요일에 시작하기도 해요. workingCalendar를 켜면 드롭한 막대가 다음 근무일로 밀리고, 타임라인이 음영으로 표시하는 날을 그대로 사용해요.

근무일 스냅 켜기Copy Anchor Link

workingCalendar는 불리언이고 기본값은 false예요. 꺼 두면 드래그가 모든 날을 세는 일반 달력 산술로 계산해요.

기본 근무 요일은 월요일부터 금요일까지예요. 근무 요일을 바꾸려면 일요일이 0인 요일 번호로 workingWeekdays를 넘기고, 주말 외의 휴일은 holidays로 넘겨요.

import { useState } from 'react';
import { ReactGanttChart, type Task } from '@jaeungkim/gantt-chart';
import '@jaeungkim/gantt-chart/style.css';

const HOLIDAYS = ['2026-09-25'];

const initialTasks: Task[] = [
  { id: 'audit', name: 'Content audit', parentId: null, sequence: '1',
    startDate: '2026-09-01', endDate: '2026-09-04' },
];

export function WorkWeekChart() {
  const [tasks, setTasks] = useState(initialTasks);

  return (
    <ReactGanttChart
      tasks={tasks}
      onTasksChange={setTasks}
      workingCalendar
      holidays={HOLIDAYS}
      showTaskList
      height={420}
    />
  );
}

workingWeekdays에 그 요일이 없거나 holidays가 그날의 UTC 날짜를 포함하면 비근무일이에요. 음영과 스냅이 이 정의 하나를 함께 읽어서, 음영이 들어간 날은 언제나 건너뛰는 날이에요. 두 prop이 무엇을 음영으로 표시하는지는 타임라인에서 다뤄요.

휴일의 label과 color는 스냅까지 전달되지 않아요. 이름이 붙은 휴일이든 평범한 토요일이든 드롭을 같은 일수만큼 밀어요.

설정은 workingWeekdays와 holidays가 전부예요. 달력 객체를 받는 prop은 없어서 격주 금요일 휴무처럼 두 prop으로 표현할 수 없는 규칙에는 스냅이 적용되지 않아요. 앱에서 직접 날짜를 계산할 때는 근무일 달력 헬퍼의 createWorkingCalendar를 사용해요.

막대 이동하거나 크기 조절하기Copy Anchor Link

어느 쪽 끝이 스냅되는지는 제스처에 따라 달라요.

월 배율에서 Content audit 막대를 4일 뒤로 끌면 시작이 토요일인 2026-09-05에 놓여요. 시작이 2일 밀려 월요일 2026-09-07이 되고 끝도 따라와서, 막대는 3일 구간을 유지해요.

스냅은 하루 단위로 앞으로만 움직여서 하루 중 시각은 그대로 남아요. 막대 자신의 끝을 넘어가는 왼쪽 크기 조절은 스냅하지 않아요. 요약 막대를 드래그하면 작업 목록과 계층 구조에서 설명하듯 하위 트리 전체가 함께 움직여요.

스냅은 포인터가 눌려 있는 동안 적용돼요. 막대와 헤더의 날짜 표시가 스냅된 날짜를 보여주고, 손을 떼면 그 날짜로 확정돼요.

막대 너비와 음영Copy Anchor Link

주말을 가로지르는 막대는 화면에서도 그대로 주말을 가로질러요. 달력은 드롭이 놓일 날짜를 정할 뿐, 막대를 그리는 방식은 바꾸지 않아요. 열과 헤더, 음영도 그대로예요.

포인터 위치를 날짜로 바꿀 때는 여전히 모든 날을 하나씩 계산해요. 스냅은 그 위에 더해지므로 이동은 막대 구간을 근무일이 아니라 달력 일수로 유지해요.

적용 전에 확인하기Copy Anchor Link

• 스냅은 포인터로 막대를 드래그할 때만 실행돼요. 새 tasks 배열, 그려서 만든 링크, 그려서 만든 작업, 상세 패널에서 입력한 날짜는 넘긴 값 그대로 남아요.
• 키보드 이동과 크기 조절은 드래그 단계만큼 움직여서 막대가 비근무일에 남을 수 있어요. 키보드와 스크린 리더를 참고해요.
• minDate와 maxDate는 스냅 다음에 적용되고 우선해서, 경계에 걸린 막대는 토요일에 끝날 수 있어요. 이 경계는 작업 편집에서 다뤄요.
• 달력은 앱이 넘기는 데이터예요. 차트가 workingWeekdays나 holidays를 고치지는 않아요.

prop과 기본값은 GanttProps를 참고해요.