Skip to content

Commit c3aee30

Browse files
jeonghanyunjeonghanyun
committed
Merge branch 'main' into feature/add-extra-columns-support
2 parents c631ff4 + 7cb9a5b commit c3aee30

12 files changed

Lines changed: 283 additions & 127 deletions

File tree

‎README.md‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,31 @@
1-
# gantt-task-react
1+
# gantt-task-react-19-korean
22

3-
## Interactive Gantt Chart for React with TypeScript.
3+
## Interactive Gantt Chart for React with TypeScript - Korean Localization
4+
5+
한국어 지원 및 추가 기능이 포함된 React용 대화형 간트 차트 라이브러리입니다.
46

57
![example](https://user-images.githubusercontent.com/26743903/88215863-f35d5f00-cc64-11ea-81db-e829e6e9b5c8.png)
68

7-
## [Live Demo](https://matematuk.github.io/gantt-task-react/)
9+
## ✨ 추가 기능 (Additional Features)
10+
11+
- 🇰🇷 **Korean Date Expressions**: `locale="kor"` 지원으로 한국어 날짜 표현
12+
- 📊 **Extra Columns**: 커스텀 컬럼 추가 및 렌더링 지원
13+
- 🎨 **Weekend Colors**: 주말 컬럼 하이라이트 기능
14+
- 🎯 **Jira-style Today**: 개선된 Today 표시 (주황색 화살표)
815

916
## Install
1017

11-
```
12-
npm install gantt-task-react
18+
```bash
19+
npm install gantt-task-react-19-korean
20+
# or
21+
yarn add gantt-task-react-19-korean
1322
```
1423

1524
## How to use it
1625

1726
```javascript
18-
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
19-
import "gantt-task-react/dist/index.css";
27+
import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react-19-korean';
28+
import "gantt-task-react-19-korean/dist/index.css";
2029

2130
let tasks: Task[] = [
2231
{
@@ -113,6 +122,7 @@ npm start
113122
| arrowColor | string | Specifies the relationship arrow fill color. |
114123
| arrowIndent | number | Specifies the relationship arrow right indent. Sets in px |
115124
| todayColor | string | Specifies the current period column fill color. |
125+
| weekendColor | string | Specifies the weekend columns fill color. |
116126
| TooltipContent | | Specifies the Tooltip view for selected taskbar. |
117127
| TaskListHeader | | Specifies the task list Header view |
118128
| TaskListTable | | Specifies the task list Table view |

‎example/src/App.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ const App = () => {
7979
<Gantt
8080
tasks={tasks}
8181
viewMode={view}
82+
locale="kor"
8283
onDateChange={handleTaskChange}
8384
onDelete={handleTaskDelete}
8485
onProgressChange={handleProgressChange}
@@ -88,11 +89,13 @@ const App = () => {
8889
onExpanderClick={handleExpanderClick}
8990
listCellWidth={isChecked ? "155px" : ""}
9091
columnWidth={columnWidth}
92+
weekendColor={"#97979714"}
9193
/>
9294
<h3>Gantt With Limited Height</h3>
9395
<Gantt
9496
tasks={tasks}
9597
viewMode={view}
98+
locale="kor"
9699
onDateChange={handleTaskChange}
97100
onDelete={handleTaskDelete}
98101
onProgressChange={handleProgressChange}
@@ -103,6 +106,7 @@ const App = () => {
103106
listCellWidth={isChecked ? "155px" : ""}
104107
ganttHeight={300}
105108
columnWidth={columnWidth}
109+
weekendColor={"#97979714"}
106110
/>
107111
<ExtraColumnsApp />
108112
</div>

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@jeonghan/gantt-task-react-19-korean",
33
"version": "1.1.0",
4-
"description": "Interactive Gantt Chart for React with TypeScript - Korean Version.",
4+
"description": "Interactive Gantt Chart for React with TypeScript - Korean localization support with extra columns and weekend colors.",
55
"author": "jeonghan",
66
"homepage": "https://github.com/yunjeonghan/gantt-task-react-19-korean",
77
"license": "MIT",
@@ -27,7 +27,10 @@
2727
"react-gantt",
2828
"task",
2929
"korean",
30-
"한국어"
30+
"한국어",
31+
"localization",
32+
"i18n",
33+
"gupsa-corp"
3134
],
3235
"scripts": {
3336
"build": "microbundle-crl --no-compress --format modern,cjs",

‎src/components/calendar/calendar.tsx‎

Lines changed: 161 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
getDaysInMonth,
77
getLocalDayOfWeek,
88
getLocaleMonth,
9-
getWeekNumberISO8601,
9+
getWeekOfMonth,
1010
} from "../../helpers/date-helper";
1111
import { DateSetup } from "../../types/date-setup";
1212
import styles from "./calendar.module.css";
@@ -40,14 +40,24 @@ export const Calendar: React.FC<CalendarProps> = ({
4040
const date = dateSetup.dates[i];
4141
const bottomValue = date.getFullYear();
4242
bottomValues.push(
43-
<text
44-
key={date.getTime()}
45-
y={headerHeight * 0.8}
46-
x={columnWidth * i + columnWidth * 0.5}
47-
className={styles.calendarBottomText}
48-
>
49-
{bottomValue}
50-
</text>
43+
<g key={date.getTime()}>
44+
<line
45+
x1={columnWidth * i}
46+
y1={headerHeight * 0.6}
47+
x2={columnWidth * i}
48+
y2={headerHeight}
49+
style={{ stroke: "black", strokeWidth: 1 }}
50+
/>
51+
<text
52+
y={headerHeight * 0.8}
53+
x={columnWidth * i + columnWidth * 0.5}
54+
textAnchor="middle"
55+
alignmentBaseline="middle"
56+
className={styles.calendarBottomText}
57+
>
58+
{bottomValue}
59+
</text>
60+
</g>
5161
);
5262
if (
5363
i === 0 ||
@@ -129,14 +139,24 @@ export const Calendar: React.FC<CalendarProps> = ({
129139
const date = dateSetup.dates[i];
130140
const bottomValue = getLocaleMonth(date, locale);
131141
bottomValues.push(
132-
<text
133-
key={bottomValue + date.getFullYear()}
134-
y={headerHeight * 0.8}
135-
x={columnWidth * i + columnWidth * 0.5}
136-
className={styles.calendarBottomText}
137-
>
138-
{bottomValue}
139-
</text>
142+
<g key={date.getTime()}>
143+
<line
144+
x1={columnWidth * i}
145+
y1={headerHeight * 0.6}
146+
x2={columnWidth * i}
147+
y2={headerHeight}
148+
style={{ stroke: "black", strokeWidth: 1 }}
149+
/>
150+
<text
151+
y={headerHeight * 0.8}
152+
x={columnWidth * i + columnWidth * 0.5}
153+
textAnchor="middle"
154+
alignmentBaseline="middle"
155+
className={styles.calendarBottomText}
156+
>
157+
{bottomValue}
158+
</text>
159+
</g>
140160
);
141161
if (
142162
i === 0 ||
@@ -176,20 +196,37 @@ export const Calendar: React.FC<CalendarProps> = ({
176196
let topValue = "";
177197
if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
178198
// top
179-
topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
199+
if (locale === "kor") {
200+
topValue = `${date.getFullYear()}년 ${getLocaleMonth(date, locale)}`;
201+
} else {
202+
topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
203+
}
180204
}
181205
// bottom
182-
const bottomValue = `W${getWeekNumberISO8601(date)}`;
206+
const bottomValue =
207+
locale === "kor"
208+
? `${getLocaleMonth(date, locale)} ${getWeekOfMonth(date)}주`
209+
: `W${getWeekOfMonth(date)}`;
183210

184211
bottomValues.push(
185-
<text
186-
key={date.getTime()}
187-
y={headerHeight * 0.8}
188-
x={columnWidth * (i + +rtl)}
189-
className={styles.calendarBottomText}
190-
>
191-
{bottomValue}
192-
</text>
212+
<g key={date.getTime()}>
213+
<line
214+
x1={columnWidth * i}
215+
y1={headerHeight * 0.6}
216+
x2={columnWidth * i}
217+
y2={headerHeight}
218+
style={{ stroke: "black", strokeWidth: 1 }}
219+
/>
220+
<text
221+
y={headerHeight * 0.8}
222+
x={columnWidth * i + columnWidth * 0.5}
223+
textAnchor="middle"
224+
alignmentBaseline="middle"
225+
className={styles.calendarBottomText}
226+
>
227+
{bottomValue}
228+
</text>
229+
</g>
193230
);
194231

195232
if (topValue) {
@@ -221,19 +258,39 @@ export const Calendar: React.FC<CalendarProps> = ({
221258
const dates = dateSetup.dates;
222259
for (let i = 0; i < dates.length; i++) {
223260
const date = dates[i];
224-
const bottomValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date
225-
.getDate()
226-
.toString()}`;
261+
const bottomValue =
262+
locale === "kor"
263+
? `${getLocaleMonth(
264+
date,
265+
locale
266+
)} ${date.getDate()}일 (${getLocalDayOfWeek(
267+
date,
268+
locale,
269+
"short"
270+
)})`
271+
: `${getLocalDayOfWeek(date, locale, "short")}, ${date
272+
.getDate()
273+
.toString()}`;
227274

228275
bottomValues.push(
229-
<text
230-
key={date.getTime()}
231-
y={headerHeight * 0.8}
232-
x={columnWidth * i + columnWidth * 0.5}
233-
className={styles.calendarBottomText}
234-
>
235-
{bottomValue}
236-
</text>
276+
<g key={date.getTime()}>
277+
<line
278+
x1={columnWidth * i}
279+
y1={headerHeight * 0.6}
280+
x2={columnWidth * i}
281+
y2={headerHeight}
282+
style={{ stroke: "black", strokeWidth: 1 }}
283+
/>
284+
<text
285+
y={headerHeight * 0.8}
286+
x={columnWidth * i + columnWidth * 0.5}
287+
textAnchor="middle"
288+
alignmentBaseline="middle"
289+
className={styles.calendarBottomText}
290+
>
291+
{bottomValue}
292+
</text>
293+
</g>
237294
);
238295
if (
239296
i + 1 !== dates.length &&
@@ -275,22 +332,41 @@ export const Calendar: React.FC<CalendarProps> = ({
275332
}).format(date);
276333

277334
bottomValues.push(
278-
<text
279-
key={date.getTime()}
280-
y={headerHeight * 0.8}
281-
x={columnWidth * (i + +rtl)}
282-
className={styles.calendarBottomText}
283-
fontFamily={fontFamily}
284-
>
285-
{bottomValue}
286-
</text>
335+
<g key={date.getTime()}>
336+
<line
337+
x1={columnWidth * i}
338+
y1={headerHeight * 0.6}
339+
x2={columnWidth * i}
340+
y2={headerHeight}
341+
style={{ stroke: "black", strokeWidth: 1 }}
342+
/>
343+
<text
344+
y={headerHeight * 0.8}
345+
x={columnWidth * i + columnWidth * 0.5}
346+
textAnchor="middle"
347+
alignmentBaseline="middle"
348+
className={styles.calendarBottomText}
349+
>
350+
{bottomValue}
351+
</text>
352+
</g>
287353
);
288354
if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
289-
const topValue = `${getLocalDayOfWeek(
290-
date,
291-
locale,
292-
"short"
293-
)}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
355+
const topValue =
356+
locale === "kor"
357+
? `${getLocaleMonth(
358+
date,
359+
locale
360+
)} ${date.getDate()}일 (${getLocalDayOfWeek(
361+
date,
362+
locale,
363+
"short"
364+
)})`
365+
: `${getLocalDayOfWeek(
366+
date,
367+
locale,
368+
"short"
369+
)}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
294370
topValues.push(
295371
<TopPartOfCalendar
296372
key={topValue + date.getFullYear()}
@@ -320,23 +396,42 @@ export const Calendar: React.FC<CalendarProps> = ({
320396
}).format(date);
321397

322398
bottomValues.push(
323-
<text
324-
key={date.getTime()}
325-
y={headerHeight * 0.8}
326-
x={columnWidth * (i + +rtl)}
327-
className={styles.calendarBottomText}
328-
fontFamily={fontFamily}
329-
>
330-
{bottomValue}
331-
</text>
399+
<g key={date.getTime()}>
400+
<line
401+
x1={columnWidth * i}
402+
y1={headerHeight * 0.6}
403+
x2={columnWidth * i}
404+
y2={headerHeight}
405+
style={{ stroke: "black", strokeWidth: 1 }}
406+
/>
407+
<text
408+
y={headerHeight * 0.8}
409+
x={columnWidth * i + columnWidth * 0.5}
410+
textAnchor="middle"
411+
alignmentBaseline="middle"
412+
className={styles.calendarBottomText}
413+
>
414+
{bottomValue}
415+
</text>
416+
</g>
332417
);
333418
if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
334419
const displayDate = dates[i - 1];
335-
const topValue = `${getLocalDayOfWeek(
336-
displayDate,
337-
locale,
338-
"long"
339-
)}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`;
420+
const topValue =
421+
locale === "kor"
422+
? `${getLocaleMonth(
423+
displayDate,
424+
locale
425+
)} ${displayDate.getDate()}일 (${getLocalDayOfWeek(
426+
displayDate,
427+
locale,
428+
"long"
429+
)})`
430+
: `${getLocalDayOfWeek(
431+
displayDate,
432+
locale,
433+
"long"
434+
)}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`;
340435
const topPosition = (date.getHours() - 24) / 2;
341436
topValues.push(
342437
<TopPartOfCalendar

0 commit comments

Comments
 (0)
⚡