How Gantt Builds On RevoGrid

Source code

1
---
2
import '@revolist/gantt/styles.css';
3
import GanttScheduling from '@revolist/revogrid-examples/components/gantt/GanttScheduling.vue';
4
---
5

6
<GanttScheduling client:only="vue" />

1
import { defineCustomElements } from '@revolist/revogrid/loader';
2
defineCustomElements();
3

4
import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/gantt';
5
import type { GanttTaskSourceRow, DependencyEntity } from '@revolist/gantt';
6
type CalendarEntity = NonNullable<
7
  import('@revolist/gantt').GanttPluginConfig['calendars']
8
>[number];
9
import { currentTheme } from '../composables/useRandomData';
10

11
const { isDark } = currentTheme();
12

13
const PROJECT_ID = 'project-web-redesign';
14
const CALENDAR_ID = 'cal-us';
15

16
// Calendar-aware scheduling: durations are in working days (Mon–Fri, excluding holidays)
17
const ganttConfig = {
18
  id: PROJECT_ID,
19
  name: 'Website Redesign',
20
  version: '1',
21
  currency: 'USD',
22
  timeZone: 'America/New_York',
23
  primaryCalendarId: CALENDAR_ID,
24
  updatedAt: '2026-04-06T00:00:00Z',
25
  statusDate: '2026-04-06',
26
  zoomPreset: 'day-week' as const,
27
  scheduling: {
28
    excludeHolidaysFromDuration: true, // durations skip weekends and holidays
29
  },
30
  visuals: {
31
    shadeNonWorkingTime: true, // shade weekend columns on the timeline
32
    projectLineDate: '2026-04-06', // vertical status-date line
33
  },
34
};
35

36
// US calendar with public holidays
37
const calendars: CalendarEntity[] = [
38
  {
39
    id: CALENDAR_ID,
40
    name: 'US Standard',
41
    timeZone: 'America/New_York',
42
    workingDays: [1, 2, 3, 4, 5], // Mon–Fri
43
    holidays: [
44
      '2026-05-25', // Memorial Day
45
      '2026-07-04', // Independence Day
46
    ],
47
    hoursPerDay: 8,
48
  },
49
];
50

51
const tasks: GanttTaskSourceRow[] = [
52
  {
53
    id: 't1',
54
    parentId: null,
55
    name: 'Design',
56
    type: 'summary',
57
    workflowStatus: 'in-progress',
58
    startDate: '2026-04-06',
59
    endDate: '2026-04-24',
60
    duration: 15,
61
    percentDone: 60,
62
    calendarId: CALENDAR_ID,
63
    tags: [],
64
  },
65
  {
66
    id: 't2',
67
    parentId: 't1',
68
    name: 'Wireframes',
69
    type: 'task',
70
    workflowStatus: 'done',
71
    startDate: '2026-04-06',
72
    endDate: '2026-04-10',
73
    duration: 5,
74
    percentDone: 100,
75
    calendarId: CALENDAR_ID,
76
    tags: [],
77
  },
78
  {
79
    id: 't3',
80
    parentId: 't1',
81
    name: 'Design Review',
82
    type: 'milestone',
83
    workflowStatus: 'done',
84
    startDate: '2026-04-10',
85
    endDate: '2026-04-10',
86
    duration: 0,
87
    percentDone: 100,
88
    calendarId: CALENDAR_ID,
89
    tags: ['milestone'],
90
  },
91
  {
92
    id: 't4',
93
    parentId: 't1',
94
    name: 'Visual Design',
95
    type: 'task',
96
    workflowStatus: 'in-progress',
97
    startDate: '2026-04-13',
98
    endDate: '2026-04-24',
99
    duration: 10,
100
    percentDone: 40,
101
    calendarId: CALENDAR_ID,
102
    tags: [],
103
  },
104
  {
105
    id: 't5',
106
    parentId: null,
107
    name: 'Development',
108
    type: 'summary',
109
    workflowStatus: 'not-started',
110
    startDate: '2026-04-27',
111
    endDate: '2026-05-28',
112
    duration: 24,
113
    percentDone: 0,
114
    calendarId: CALENDAR_ID,
115
    tags: [],
116
  },
117
  {
118
    id: 't6',
119
    parentId: 't5',
120
    name: 'Frontend',
121
    type: 'task',
122
    workflowStatus: 'not-started',
123
    // constraint: cannot start before May 4 (waiting on external API)
124
    startDate: '2026-05-04',
125
    endDate: '2026-05-20',
126
    duration: 13,
127
    percentDone: 0,
128
    calendarId: CALENDAR_ID,
129
    tags: [],
130
    constraintType: 'start-no-earlier-than',
131
    constraintDate: '2026-05-04',
132
  },
133
  {
134
    id: 't7',
135
    parentId: 't5',
136
    name: 'Backend',
137
    type: 'task',
138
    workflowStatus: 'not-started',
139
    startDate: '2026-04-27',
140
    endDate: '2026-05-28',
141
    duration: 24,
142
    percentDone: 0,
143
    calendarId: CALENDAR_ID,
144
    tags: [],
145
    deadlineDate: '2026-05-22', // deadline marker — project expects early delivery
146
  },
147
  {
148
    id: 't8',
149
    parentId: null,
150
    name: 'Launch',
151
    type: 'milestone',
152
    workflowStatus: 'not-started',
153
    startDate: '2026-05-28',
154
    endDate: '2026-05-28',
155
    duration: 0,
156
    percentDone: 0,
157
    calendarId: CALENDAR_ID,
158
    tags: ['milestone'],
159
  },
160
];
161

162
const dependencies: DependencyEntity[] = [
163
  {
164
    id: 'd1',
165
    predecessorTaskId: 't2',
166
    successorTaskId: 't3',
167
    type: 'finish-to-start',
168
    lagDays: 0,
169
  },
170
  {
171
    id: 'd2',
172
    predecessorTaskId: 't3',
173
    successorTaskId: 't4',
174
    type: 'finish-to-start',
175
    lagDays: 1,
176
  },
177
  {
178
    id: 'd3',
179
    predecessorTaskId: 't4',
180
    successorTaskId: 't6',
181
    type: 'finish-to-start',
182
    lagDays: 1,
183
  },
184
  {
185
    id: 'd4',
186
    predecessorTaskId: 't4',
187
    successorTaskId: 't7',
188
    type: 'finish-to-start',
189
    lagDays: 1,
190
  },
191
  {
192
    id: 'd5',
193
    predecessorTaskId: 't6',
194
    successorTaskId: 't8',
195
    type: 'finish-to-start',
196
    lagDays: 0,
197
  },
198
  {
199
    id: 'd6',
200
    predecessorTaskId: 't7',
201
    successorTaskId: 't8',
202
    type: 'finish-to-start',
203
    lagDays: 0,
204
  },
205
];
206

207
export function load(parentSelector: string) {
208
  const grid = document.createElement('revo-grid');
209

210
  grid.theme = isDark() ? 'darkCompact' : 'compact';
211
  grid.hideAttribution = true;
212
  grid.plugins = [GanttPlugin];
213
  grid.gantt = ganttConfig;
214
  grid.ganttCalendars = calendars;
215
  grid.ganttDependencies = dependencies;
216
  grid.source = tasks;
217
  grid.columns = [
218
    createDefaultTaskTableColumn('wbs'),
219
    createDefaultTaskTableColumn('name'),
220
  ];
221

222
  document.querySelector(parentSelector)?.appendChild(grid);
223
}

1
<template>
2
  <RevoGrid
3
    hide-attribution
4
    style="height: 500px"
5
    :theme="isDark ? 'darkCompact' : 'compact'"
6
    :plugins="plugins"
7
    :source="tasks"
8
    :columns="columns"
9
    :gantt.prop="ganttConfig"
10
    :gantt-dependencies.prop="dependencies"
11
    :gantt-calendars.prop="calendars"
12
  />
13
</template>
14

15
<script setup lang="ts">
16
import { ref } from 'vue';
17
import RevoGrid from '@revolist/vue3-datagrid';
18
import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/gantt';
19
import type { GanttTaskSourceRow, DependencyEntity } from '@revolist/gantt';
20
type CalendarEntity = NonNullable<
21
  import('@revolist/gantt').GanttPluginConfig['calendars']
22
>[number];
23
import { currentThemeVue } from '../composables/useRandomData';
24

25
const { isDark } = currentThemeVue();
26

27
const PROJECT_ID = 'project-web-redesign';
28
const CALENDAR_ID = 'cal-us';
29

30
const plugins = ref([GanttPlugin]);
31

32
const ganttConfig = ref({
33
  id: PROJECT_ID,
34
  name: 'Website Redesign',
35
  version: '1',
36
  currency: 'USD',
37
  timeZone: 'America/New_York',
38
  primaryCalendarId: CALENDAR_ID,
39
  updatedAt: '2026-04-06T00:00:00Z',
40
  statusDate: '2026-04-06',
41
  zoomPreset: 'day-week' as const,
42
  scheduling: {
43
    excludeHolidaysFromDuration: true,
44
  },
45
  visuals: {
46
    shadeNonWorkingTime: true,
47
    projectLineDate: '2026-04-06',
48
  },
49
});
50

51
const calendars = ref<CalendarEntity[]>([
52
  {
53
    id: CALENDAR_ID,
54
    name: 'US Standard',
55
    timeZone: 'America/New_York',
56
    workingDays: [1, 2, 3, 4, 5],
57
    holidays: ['2026-05-25', '2026-07-04'],
58
    hoursPerDay: 8,
59
  },
60
]);
61

62
const tasks = ref<GanttTaskSourceRow[]>([
63
  {
64
    id: 't1',
65
    parentId: null,
66
    name: 'Design',
67
    type: 'summary',
68
    workflowStatus: 'in-progress',
69
    startDate: '2026-04-06',
70
    endDate: '2026-04-24',
71
    duration: 15,
72
    percentDone: 60,
73
    calendarId: CALENDAR_ID,
74
    tags: [],
75
  },
76
  {
77
    id: 't2',
78
    parentId: 't1',
79
    name: 'Wireframes',
80
    type: 'task',
81
    workflowStatus: 'done',
82
    startDate: '2026-04-06',
83
    endDate: '2026-04-10',
84
    duration: 5,
85
    percentDone: 100,
86
    calendarId: CALENDAR_ID,
87
    tags: [],
88
  },
89
  {
90
    id: 't3',
91
    parentId: 't1',
92
    name: 'Design Review',
93
    type: 'milestone',
94
    workflowStatus: 'done',
95
    startDate: '2026-04-10',
96
    endDate: '2026-04-10',
97
    duration: 0,
98
    percentDone: 100,
99
    calendarId: CALENDAR_ID,
100
    tags: ['milestone'],
101
  },
102
  {
103
    id: 't4',
104
    parentId: 't1',
105
    name: 'Visual Design',
106
    type: 'task',
107
    workflowStatus: 'in-progress',
108
    startDate: '2026-04-13',
109
    endDate: '2026-04-24',
110
    duration: 10,
111
    percentDone: 40,
112
    calendarId: CALENDAR_ID,
113
    tags: [],
114
  },
115
  {
116
    id: 't5',
117
    parentId: null,
118
    name: 'Development',
119
    type: 'summary',
120
    workflowStatus: 'not-started',
121
    startDate: '2026-04-27',
122
    endDate: '2026-05-28',
123
    duration: 24,
124
    percentDone: 0,
125
    calendarId: CALENDAR_ID,
126
    tags: [],
127
  },
128
  {
129
    id: 't6',
130
    parentId: 't5',
131
    name: 'Frontend',
132
    type: 'task',
133
    workflowStatus: 'not-started',
134
    startDate: '2026-05-04',
135
    endDate: '2026-05-20',
136
    duration: 13,
137
    percentDone: 0,
138
    calendarId: CALENDAR_ID,
139
    tags: [],
140
    constraintType: 'start-no-earlier-than',
141
    constraintDate: '2026-05-04',
142
  },
143
  {
144
    id: 't7',
145
    parentId: 't5',
146
    name: 'Backend',
147
    type: 'task',
148
    workflowStatus: 'not-started',
149
    startDate: '2026-04-27',
150
    endDate: '2026-05-28',
151
    duration: 24,
152
    percentDone: 0,
153
    calendarId: CALENDAR_ID,
154
    tags: [],
155
    deadlineDate: '2026-05-22',
156
  },
157
  {
158
    id: 't8',
159
    parentId: null,
160
    name: 'Launch',
161
    type: 'milestone',
162
    workflowStatus: 'not-started',
163
    startDate: '2026-05-28',
164
    endDate: '2026-05-28',
165
    duration: 0,
166
    percentDone: 0,
167
    calendarId: CALENDAR_ID,
168
    tags: ['milestone'],
169
  },
170
]);
171

172
const dependencies = ref<DependencyEntity[]>([
173
  {
174
    id: 'd1',
175
    predecessorTaskId: 't2',
176
    successorTaskId: 't3',
177
    type: 'finish-to-start',
178
    lagDays: 0,
179
  },
180
  {
181
    id: 'd2',
182
    predecessorTaskId: 't3',
183
    successorTaskId: 't4',
184
    type: 'finish-to-start',
185
    lagDays: 1,
186
  },
187
  {
188
    id: 'd3',
189
    predecessorTaskId: 't4',
190
    successorTaskId: 't6',
191
    type: 'finish-to-start',
192
    lagDays: 1,
193
  },
194
  {
195
    id: 'd4',
196
    predecessorTaskId: 't4',
197
    successorTaskId: 't7',
198
    type: 'finish-to-start',
199
    lagDays: 1,
200
  },
201
  {
202
    id: 'd5',
203
    predecessorTaskId: 't6',
204
    successorTaskId: 't8',
205
    type: 'finish-to-start',
206
    lagDays: 0,
207
  },
208
  {
209
    id: 'd6',
210
    predecessorTaskId: 't7',
211
    successorTaskId: 't8',
212
    type: 'finish-to-start',
213
    lagDays: 0,
214
  },
215
]);
216

217
const columns = ref([
218
  createDefaultTaskTableColumn('wbs'),
219
  createDefaultTaskTableColumn('name'),
220
]);
221
</script>

1
import React, { useMemo } from 'react';
2
import { RevoGrid } from '@revolist/react-datagrid';
3
import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/gantt';
4
import type { GanttTaskSourceRow, DependencyEntity } from '@revolist/gantt';
5
type CalendarEntity = NonNullable<
6
  import('@revolist/gantt').GanttPluginConfig['calendars']
7
>[number];
8
import { currentTheme } from '../composables/useRandomData';
9

10
const { isDark } = currentTheme();
11

12
const PROJECT_ID = 'project-web-redesign';
13
const CALENDAR_ID = 'cal-us';
14

15
const tasks: GanttTaskSourceRow[] = [
16
  {
17
    id: 't1',
18
    parentId: null,
19
    name: 'Design',
20
    type: 'summary',
21
    workflowStatus: 'in-progress',
22
    startDate: '2026-04-06',
23
    endDate: '2026-04-24',
24
    duration: 15,
25
    percentDone: 60,
26
    calendarId: CALENDAR_ID,
27
    tags: [],
28
  },
29
  {
30
    id: 't2',
31
    parentId: 't1',
32
    name: 'Wireframes',
33
    type: 'task',
34
    workflowStatus: 'done',
35
    startDate: '2026-04-06',
36
    endDate: '2026-04-10',
37
    duration: 5,
38
    percentDone: 100,
39
    calendarId: CALENDAR_ID,
40
    tags: [],
41
  },
42
  {
43
    id: 't3',
44
    parentId: 't1',
45
    name: 'Design Review',
46
    type: 'milestone',
47
    workflowStatus: 'done',
48
    startDate: '2026-04-10',
49
    endDate: '2026-04-10',
50
    duration: 0,
51
    percentDone: 100,
52
    calendarId: CALENDAR_ID,
53
    tags: ['milestone'],
54
  },
55
  {
56
    id: 't4',
57
    parentId: 't1',
58
    name: 'Visual Design',
59
    type: 'task',
60
    workflowStatus: 'in-progress',
61
    startDate: '2026-04-13',
62
    endDate: '2026-04-24',
63
    duration: 10,
64
    percentDone: 40,
65
    calendarId: CALENDAR_ID,
66
    tags: [],
67
  },
68
  {
69
    id: 't5',
70
    parentId: null,
71
    name: 'Development',
72
    type: 'summary',
73
    workflowStatus: 'not-started',
74
    startDate: '2026-04-27',
75
    endDate: '2026-05-28',
76
    duration: 24,
77
    percentDone: 0,
78
    calendarId: CALENDAR_ID,
79
    tags: [],
80
  },
81
  {
82
    id: 't6',
83
    parentId: 't5',
84
    name: 'Frontend',
85
    type: 'task',
86
    workflowStatus: 'not-started',
87
    startDate: '2026-05-04',
88
    endDate: '2026-05-20',
89
    duration: 13,
90
    percentDone: 0,
91
    calendarId: CALENDAR_ID,
92
    tags: [],
93
    constraintType: 'start-no-earlier-than',
94
    constraintDate: '2026-05-04',
95
  },
96
  {
97
    id: 't7',
98
    parentId: 't5',
99
    name: 'Backend',
100
    type: 'task',
101
    workflowStatus: 'not-started',
102
    startDate: '2026-04-27',
103
    endDate: '2026-05-28',
104
    duration: 24,
105
    percentDone: 0,
106
    calendarId: CALENDAR_ID,
107
    tags: [],
108
    deadlineDate: '2026-05-22',
109
  },
110
  {
111
    id: 't8',
112
    parentId: null,
113
    name: 'Launch',
114
    type: 'milestone',
115
    workflowStatus: 'not-started',
116
    startDate: '2026-05-28',
117
    endDate: '2026-05-28',
118
    duration: 0,
119
    percentDone: 0,
120
    calendarId: CALENDAR_ID,
121
    tags: ['milestone'],
122
  },
123
];
124

125
const dependencies: DependencyEntity[] = [
126
  {
127
    id: 'd1',
128
    predecessorTaskId: 't2',
129
    successorTaskId: 't3',
130
    type: 'finish-to-start',
131
    lagDays: 0,
132
  },
133
  {
134
    id: 'd2',
135
    predecessorTaskId: 't3',
136
    successorTaskId: 't4',
137
    type: 'finish-to-start',
138
    lagDays: 1,
139
  },
140
  {
141
    id: 'd3',
142
    predecessorTaskId: 't4',
143
    successorTaskId: 't6',
144
    type: 'finish-to-start',
145
    lagDays: 1,
146
  },
147
  {
148
    id: 'd4',
149
    predecessorTaskId: 't4',
150
    successorTaskId: 't7',
151
    type: 'finish-to-start',
152
    lagDays: 1,
153
  },
154
  {
155
    id: 'd5',
156
    predecessorTaskId: 't6',
157
    successorTaskId: 't8',
158
    type: 'finish-to-start',
159
    lagDays: 0,
160
  },
161
  {
162
    id: 'd6',
163
    predecessorTaskId: 't7',
164
    successorTaskId: 't8',
165
    type: 'finish-to-start',
166
    lagDays: 0,
167
  },
168
];
169

170
const calendars: CalendarEntity[] = [
171
  {
172
    id: CALENDAR_ID,
173
    name: 'US Standard',
174
    timeZone: 'America/New_York',
175
    workingDays: [1, 2, 3, 4, 5],
176
    holidays: ['2026-05-25', '2026-07-04'],
177
    hoursPerDay: 8,
178
  },
179
];
180

181
function GanttScheduling() {
182
  const ganttConfig = useMemo(
183
    () => ({
184
      id: PROJECT_ID,
185
      name: 'Website Redesign',
186
      version: '1',
187
      currency: 'USD',
188
      timeZone: 'America/New_York',
189
      primaryCalendarId: CALENDAR_ID,
190
      updatedAt: '2026-04-06T00:00:00Z',
191
      statusDate: '2026-04-06',
192
      zoomPreset: 'day-week' as const,
193
      scheduling: {
194
        excludeHolidaysFromDuration: true,
195
      },
196
      visuals: {
197
        shadeNonWorkingTime: true,
198
        projectLineDate: '2026-04-06',
199
      },
200
    }),
201
    [],
202
  );
203

204
  const columns = useMemo(
205
    () => [
206
      createDefaultTaskTableColumn('wbs'),
207
      createDefaultTaskTableColumn('name'),
208
    ],
209
    [],
210
  );
211

212
  return (
213
    <RevoGrid
214
      style={{ height: '500px' }}
215
      theme={isDark() ? 'darkCompact' : 'compact'}
216
      hideAttribution
217
      plugins={[GanttPlugin]}
218
      source={tasks}
219
      columns={columns}
220
      gantt={ganttConfig}
221
      ganttDependencies={dependencies}
222
      ganttCalendars={calendars}
223
    />
224
  );
225
}
226

227
export default GanttScheduling;

1
import { Component, NO_ERRORS_SCHEMA, ViewEncapsulation } from '@angular/core';
2
import { RevoGrid } from '@revolist/angular-datagrid';
3
import { GanttPlugin, createDefaultTaskTableColumn } from '@revolist/gantt';
4
import type { GanttTaskSourceRow, DependencyEntity } from '@revolist/gantt';
5
type CalendarEntity = NonNullable<
6
  import('@revolist/gantt').GanttPluginConfig['calendars']
7
>[number];
8
import { currentTheme } from '../composables/useRandomData';
9

10
const PROJECT_ID = 'project-web-redesign';
11
const CALENDAR_ID = 'cal-us';
12

13
@Component({
14
  selector: 'gantt-scheduling-grid',
15
  standalone: true,
16
  imports: [RevoGrid],
17
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
18
  schemas: [NO_ERRORS_SCHEMA],
19
  template: `
20
    <revo-grid
21
      style="min-height: 500px"
22
      [theme]="theme"
23
      [hideAttribution]="true"
24
      [plugins]="plugins"
25
      [source]="tasks"
26
      [columns]="columns"
27
      [gantt]="ganttConfig"
28
      [ganttDependencies]="dependencies"
29
      [ganttCalendars]="calendars"
30
    ></revo-grid>
31
  `,
32
  encapsulation: ViewEncapsulation.None,
33
})
34
export class GanttSchedulingGridComponent {
35
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
36
  plugins = [GanttPlugin];
37

38
  ganttConfig = {
39
    id: PROJECT_ID,
40
    name: 'Website Redesign',
41
    version: '1',
42
    currency: 'USD',
43
    timeZone: 'America/New_York',
44
    primaryCalendarId: CALENDAR_ID,
45
    updatedAt: '2026-04-06T00:00:00Z',
46
    statusDate: '2026-04-06',
47
    zoomPreset: 'day-week' as const,
48
    scheduling: {
49
      excludeHolidaysFromDuration: true,
50
    },
51
    visuals: {
52
      shadeNonWorkingTime: true,
53
      projectLineDate: '2026-04-06',
54
    },
55
  };
56

57
  calendars: CalendarEntity[] = [
58
    {
59
      id: CALENDAR_ID,
60
      name: 'US Standard',
61
      timeZone: 'America/New_York',
62
      workingDays: [1, 2, 3, 4, 5],
63
      holidays: ['2026-05-25', '2026-07-04'],
64
      hoursPerDay: 8,
65
    },
66
  ];
67

68
  tasks: GanttTaskSourceRow[] = [
69
    {
70
      id: 't1',
71
      parentId: null,
72
      name: 'Design',
73
      type: 'summary',
74
      workflowStatus: 'in-progress',
75
      startDate: '2026-04-06',
76
      endDate: '2026-04-24',
77
      duration: 15,
78
      percentDone: 60,
79
      calendarId: CALENDAR_ID,
80
      tags: [],
81
    },
82
    {
83
      id: 't2',
84
      parentId: 't1',
85
      name: 'Wireframes',
86
      type: 'task',
87
      workflowStatus: 'done',
88
      startDate: '2026-04-06',
89
      endDate: '2026-04-10',
90
      duration: 5,
91
      percentDone: 100,
92
      calendarId: CALENDAR_ID,
93
      tags: [],
94
    },
95
    {
96
      id: 't3',
97
      parentId: 't1',
98
      name: 'Design Review',
99
      type: 'milestone',
100
      workflowStatus: 'done',
101
      startDate: '2026-04-10',
102
      endDate: '2026-04-10',
103
      duration: 0,
104
      percentDone: 100,
105
      calendarId: CALENDAR_ID,
106
      tags: ['milestone'],
107
    },
108
    {
109
      id: 't4',
110
      parentId: 't1',
111
      name: 'Visual Design',
112
      type: 'task',
113
      workflowStatus: 'in-progress',
114
      startDate: '2026-04-13',
115
      endDate: '2026-04-24',
116
      duration: 10,
117
      percentDone: 40,
118
      calendarId: CALENDAR_ID,
119
      tags: [],
120
    },
121
    {
122
      id: 't5',
123
      parentId: null,
124
      name: 'Development',
125
      type: 'summary',
126
      workflowStatus: 'not-started',
127
      startDate: '2026-04-27',
128
      endDate: '2026-05-28',
129
      duration: 24,
130
      percentDone: 0,
131
      calendarId: CALENDAR_ID,
132
      tags: [],
133
    },
134
    {
135
      id: 't6',
136
      parentId: 't5',
137
      name: 'Frontend',
138
      type: 'task',
139
      workflowStatus: 'not-started',
140
      startDate: '2026-05-04',
141
      endDate: '2026-05-20',
142
      duration: 13,
143
      percentDone: 0,
144
      calendarId: CALENDAR_ID,
145
      tags: [],
146
      constraintType: 'start-no-earlier-than',
147
      constraintDate: '2026-05-04',
148
    },
149
    {
150
      id: 't7',
151
      parentId: 't5',
152
      name: 'Backend',
153
      type: 'task',
154
      workflowStatus: 'not-started',
155
      startDate: '2026-04-27',
156
      endDate: '2026-05-28',
157
      duration: 24,
158
      percentDone: 0,
159
      calendarId: CALENDAR_ID,
160
      tags: [],
161
      deadlineDate: '2026-05-22',
162
    },
163
    {
164
      id: 't8',
165
      parentId: null,
166
      name: 'Launch',
167
      type: 'milestone',
168
      workflowStatus: 'not-started',
169
      startDate: '2026-05-28',
170
      endDate: '2026-05-28',
171
      duration: 0,
172
      percentDone: 0,
173
      calendarId: CALENDAR_ID,
174
      tags: ['milestone'],
175
    },
176
  ];
177

178
  dependencies: DependencyEntity[] = [
179
    {
180
      id: 'd1',
181
      predecessorTaskId: 't2',
182
      successorTaskId: 't3',
183
      type: 'finish-to-start',
184
      lagDays: 0,
185
    },
186
    {
187
      id: 'd2',
188
      predecessorTaskId: 't3',
189
      successorTaskId: 't4',
190
      type: 'finish-to-start',
191
      lagDays: 1,
192
    },
193
    {
194
      id: 'd3',
195
      predecessorTaskId: 't4',
196
      successorTaskId: 't6',
197
      type: 'finish-to-start',
198
      lagDays: 1,
199
    },
200
    {
201
      id: 'd4',
202
      predecessorTaskId: 't4',
203
      successorTaskId: 't7',
204
      type: 'finish-to-start',
205
      lagDays: 1,
206
    },
207
    {
208
      id: 'd5',
209
      predecessorTaskId: 't6',
210
      successorTaskId: 't8',
211
      type: 'finish-to-start',
212
      lagDays: 0,
213
    },
214
    {
215
      id: 'd6',
216
      predecessorTaskId: 't7',
217
      successorTaskId: 't8',
218
      type: 'finish-to-start',
219
      lagDays: 0,
220
    },
221
  ];
222

223
  columns = [
224
    createDefaultTaskTableColumn('wbs'),
225
    createDefaultTaskTableColumn('name'),
226
  ];
227
}

RevoGrid provides row/column virtualization, editing, selection, scrolling, and base rendering. Gantt extends that with timeline projection, dependency overlays, scheduling, and resource planning.

Implementation layers:

Grid/plugin orchestration: packages/gantt/src/gantt/grid/gantt-plugin.ts
Scheduling engine: packages/gantt/src/gantt/engine/
Projection and timeline model: packages/gantt/src/gantt/projection/
Interaction features: packages/gantt/src/gantt/features/

Use this split when debugging behavior: if data rules changed, inspect engine; if visual output changed, inspect projection/features; if event routing changed, inspect grid.