@jeonghan/gantt-task-react-19-korean

v1.2.0

Published

7 months ago

Interactive Gantt Chart for React with TypeScript - Korean localization support with extra columns and weekend colors.

0High
0Medium
0Low

jeonghan.yun

react gantt typescript chart svg gantt-chart gantt chart react-gantt task korean 한국어 localization i18n gupsa-corp

gantt-task-react-19-korean

Interactive Gantt Chart for React with TypeScript - Korean Localization

한국어 지원 및 추가 기능이 포함된 React용 대화형 간트 차트 라이브러리입니다.

example

✨ 추가 기능 (Additional Features)

🇰🇷 Korean Date Expressions: locale="kor" 지원으로 한국어 날짜 표현
📊 Extra Columns: 커스텀 컬럼 추가 및 렌더링 지원
🎨 Weekend Colors: 주말 컬럼 하이라이트 기능
🎯 Jira-style Today: 개선된 Today 표시 (주황색 화살표)

Install

npm install gantt-task-react-19-korean
# or
yarn add gantt-task-react-19-korean

How to use it

import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react-19-korean';
import "gantt-task-react-19-korean/dist/index.css";

let tasks: Task[] = [
    {
      start: new Date(2020, 1, 1),
      end: new Date(2020, 1, 2),
      name: 'Idea',
      id: 'Task 0',
      type:'task',
      progress: 45,
      isDisabled: true,
      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
    },
    ...
];
<Gantt tasks={tasks} />

You may handle actions

<Gantt
  tasks={tasks}
  viewMode={view}
  onDateChange={onTaskChange}
  onTaskDelete={onTaskDelete}
  onProgressChange={onProgressChange}
  onDoubleClick={onDblClick}
  onClick={onClick}
/>

How to run example

cd ./example
npm install
npm start

Gantt Configuration

GanttProps

EventOption

* Chart undoes operation if method return false or error. Parameter children returns one level deep records.

DisplayOption

StylingOption

TooltipContent: React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;
TaskListHeader: React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;
TaskListTable: React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>;

Task

*Required

Extra Columns Support

You can add custom columns to the task list by using the extraColumns prop:

import { Gantt, Task, ExtraColumn, DateFormat } from 'gantt-task-react';

// Define extra columns
const extraColumns: ExtraColumn[] = [
  {
    key: "status",
    title: "Status",
    width: "100px",
  },
  {
    key: "assignee",
    title: "Assignee",
    width: "120px",
  },
  {
    key: "priority",
    title: "Priority",
    width: "80px",
    render: (task) => (
      <span className={`priority-${task.extraColumns?.priority}`}>
        {task.extraColumns?.priority}
      </span>
    ),
  },
];

// Add extra data to your tasks
const tasks: Task[] = [
  {
    id: "1",
    name: "Task 1",
    start: new Date(),
    end: new Date(),
    progress: 50,
    type: "task",
    extraColumns: {
      status: "In Progress",
      assignee: "John Doe",
      priority: "High",
    },
  },
];

<Gantt
  tasks={tasks}
  extraColumns={extraColumns}
  nameColumnWidth="200px"
  fromColumnWidth="130px"
  toColumnWidth="130px"
  dateFormat="iso8601"
/>

ExtraColumn Interface

Column Width Configuration

You can customize the width of the default columns:

Date Format Configuration

You can choose how dates are displayed in the From and To columns:

import { Gantt, DateFormat } from 'gantt-task-react';

<Gantt
  tasks={tasks}
  dateFormat="iso8601"  // Options: "locale" or "iso8601"
/>

DateFormat Options:

"locale" (default): Displays dates in locale-specific format (e.g., "Fri, June 15, 2025")
"iso8601": Displays dates in ISO 8601 format (e.g., "2025-06-15")