Skip to content

Commit 0e05267

Browse files
DozalexDozalex
committed
feat: weekendColor prop to highlight weekend columns.
- added weekendColor prop to styling interface; - added weekendColor support in Gantt components; - added weekendColor support in GridBody components; - updated README.md with weekendColor documentation; Based on PR MaTeMaTuK#122 from MaTeMaTuK/gantt-task-react by AquilesOliveiraDev
1 parent 72c49fb commit 0e05267

File tree

8 files changed

+56
-26
lines changed

8 files changed

+56
-26
lines changed

‎README.md‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -94,28 +94,29 @@ npm start
9494

9595
### StylingOption
9696

97-
| Parameter Name | Type | Description |
98-
| :------------------------- | :----- | :--------------------------------------------------------------------------------------------- |
99-
| headerHeight | number | Specifies the header height. |
100-
| ganttHeight | number | Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation. |
101-
| columnWidth | number | Specifies the time period width. |
102-
| listCellWidth | string | Specifies the task list cell width. Empty string is mean "no display". |
103-
| rowHeight | number | Specifies the task row height. |
104-
| barCornerRadius | number | Specifies the taskbar corner rounding. |
105-
| barFill | number | Specifies the taskbar occupation. Sets in percent from 0 to 100. |
106-
| handleWidth | number | Specifies width the taskbar drag event control for start and end dates. |
107-
| fontFamily | string | Specifies the application font. |
108-
| fontSize | string | Specifies the application font size. |
109-
| barProgressColor | string | Specifies the taskbar progress fill color globally. |
110-
| barProgressSelectedColor | string | Specifies the taskbar progress fill color globally on select. |
111-
| barBackgroundColor | string | Specifies the taskbar background fill color globally. |
112-
| barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select. |
113-
| arrowColor | string | Specifies the relationship arrow fill color. |
114-
| arrowIndent | number | Specifies the relationship arrow right indent. Sets in px |
115-
| todayColor | string | Specifies the current period column fill color. |
116-
| TooltipContent | | Specifies the Tooltip view for selected taskbar. |
117-
| TaskListHeader | | Specifies the task list Header view |
118-
| TaskListTable | | Specifies the task list Table view |
97+
| Parameter Name | Type | Description |
98+
|:----------------------------| :----- | :--------------------------------------------------------------------------------------------- |
99+
| headerHeight | number | Specifies the header height. |
100+
| ganttHeight | number | Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation. |
101+
| columnWidth | number | Specifies the time period width. |
102+
| listCellWidth | string | Specifies the task list cell width. Empty string is mean "no display". |
103+
| rowHeight | number | Specifies the task row height. |
104+
| barCornerRadius | number | Specifies the taskbar corner rounding. |
105+
| barFill | number | Specifies the taskbar occupation. Sets in percent from 0 to 100. |
106+
| handleWidth | number | Specifies width the taskbar drag event control for start and end dates. |
107+
| fontFamily | string | Specifies the application font. |
108+
| fontSize | string | Specifies the application font size. |
109+
| barProgressColor | string | Specifies the taskbar progress fill color globally. |
110+
| barProgressSelectedColor | string | Specifies the taskbar progress fill color globally on select. |
111+
| barBackgroundColor | string | Specifies the taskbar background fill color globally. |
112+
| barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select. |
113+
| arrowColor | string | Specifies the relationship arrow fill color. |
114+
| arrowIndent | number | Specifies the relationship arrow right indent. Sets in px |
115+
| todayColor | string | Specifies the current period column fill color. |
116+
| weekendColor | string | Specifies the weekend columns fill color. |
117+
| TooltipContent | | Specifies the Tooltip view for selected taskbar. |
118+
| TaskListHeader | | Specifies the task list Header view |
119+
| TaskListTable | | Specifies the task list Table view |
119120

120121
- TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](https://github.com/dozalex/gantt-task-react/blob/main/src/components/other/tooltip.tsx#L56)
121122
- TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`

‎example/package-lock.json‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ const App = () => {
8787
onExpanderClick={handleExpanderClick}
8888
listCellWidth={isChecked ? "155px" : ""}
8989
columnWidth={columnWidth}
90+
weekendColor={"#97979714"}
9091
/>
9192
<h3>Gantt With Limited Height</h3>
9293
<Gantt
@@ -102,6 +103,7 @@ const App = () => {
102103
listCellWidth={isChecked ? "155px" : ""}
103104
ganttHeight={300}
104105
columnWidth={columnWidth}
106+
weekendColor={"#97979714"}
105107
/>
106108
</div>
107109
);

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@dozalex/gantt-task-react",
3-
"version": "0.3.9",
3+
"version": "0.3.10",
44
"description": "Interactive Gantt Chart for React with TypeScript.",
55
"author": "MaTeMaTuK <[email protected]>",
66
"homepage": "https://github.com/dozalex/gantt-task-react",

‎src/components/gantt/gantt.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
5454
fontSize = "14px",
5555
arrowIndent = 20,
5656
todayColor = "rgba(252, 248, 227, 0.5)",
57+
weekendColor,
5758
viewDate,
5859
TooltipContent = StandardTooltipContent,
5960
TaskListHeader = TaskListHeaderDefault,
@@ -394,6 +395,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
394395
rowHeight,
395396
dates: dateSetup.dates,
396397
todayColor,
398+
weekendColor,
397399
rtl,
398400
};
399401
const calendarProps: CalendarProps = {

‎src/components/grid/grid-body.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export type GridBodyProps = {
1010
rowHeight: number;
1111
columnWidth: number;
1212
todayColor: string;
13+
weekendColor?: string;
1314
rtl: boolean;
1415
};
1516
export const GridBody: React.FC<GridBodyProps> = ({
@@ -19,6 +20,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
1920
svgWidth,
2021
columnWidth,
2122
todayColor,
23+
weekendColor,
2224
rtl,
2325
}) => {
2426
let y = 0;
@@ -60,6 +62,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
6062
const now = new Date();
6163
let tickX = 0;
6264
const ticks: ReactChild[] = [];
65+
const weekends: ReactChild[] = [];
6366
let today: ReactChild = <rect />;
6467
for (let i = 0; i < dates.length; i++) {
6568
const date = dates[i];
@@ -73,6 +76,25 @@ export const GridBody: React.FC<GridBodyProps> = ({
7376
className={styles.gridTick}
7477
/>
7578
);
79+
80+
if (
81+
weekendColor &&
82+
weekendColor !== "transparent" &&
83+
dates[i + 1] &&
84+
[0, 6].includes(dates[i + 1].getDay())
85+
) {
86+
weekends.push(
87+
<rect
88+
key={"WeekendColumn" + i}
89+
x={tickX + columnWidth}
90+
y={0}
91+
width={columnWidth}
92+
height={y}
93+
fill={weekendColor}
94+
/>
95+
);
96+
}
97+
7698
if (
7799
(i + 1 !== dates.length &&
78100
date.getTime() < now.getTime() &&
@@ -121,6 +143,7 @@ export const GridBody: React.FC<GridBodyProps> = ({
121143
<g className="rows">{gridRows}</g>
122144
<g className="rowLines">{rowLines}</g>
123145
<g className="ticks">{ticks}</g>
146+
<g className="weekends">{weekends}</g>
124147
<g className="today">{today}</g>
125148
</g>
126149
);

‎src/types/public-types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ export interface StylingOption {
113113
arrowColor?: string;
114114
arrowIndent?: number;
115115
todayColor?: string;
116+
weekendColor?: string;
116117
TooltipContent?: React.FC<{
117118
task: Task;
118119
fontSize: string;

0 commit comments

Comments
 (0)