Drag, Resize, And Progress Editing

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
}

Implemented interactions:

Drag task bars to move.
Drag start/end handles to resize.
Drag progress handle to update completion.

During a move or resize, a live readout shows the proposed start, finish, duration, and snapping unit. Datetime tasks include times by default. The proposed values use the same snapping policy as the released edit; the moving bar follows the pointer. Hold the pointer near either timeline edge to scroll while editing.

Press Escape before releasing to cancel the gesture. The task and history remain unchanged, and releasing afterward does not commit the canceled edit.

At compressed scales, the readout recommends zooming in for finer control. Use the toolbar zoom controls before making precise edits: equal pixel movements represent different date ranges at different zoom levels.

Each interaction has preview state and commit state and can trigger warning/diagnostic updates.

Mobile And Touch Devices

Gantt supports phones, tablets, and hybrid devices through adaptive pointer handling. Desktop users can drag task bars and handles directly. Touch users get a safer select-then-edit flow so scrolling a dense timeline does not accidentally change the schedule.

On coarse-pointer devices:

Tap a task bar to select it.
Selection reveals larger resize, dependency, progress, and split handles.
Drag the selected task bar to move the task.
Drag a visible start/end handle to resize.
Drag the visible progress handle to update completion.
Start swiping from an unselected task bar when you want to pan the task table or timeline; hidden handles are not hit-testable until selection.

The mobile path keeps native panning available for unselected task bars and disables browser touch panning only on selected/active bars or visible edit handles. This preserves scroll-first behavior while still allowing precise edits after the user has selected the task.

The packaged task editor dialog also adapts to phone-width screens with a full-viewport, single-column layout and larger touch targets.

Implementation:

features/tasks/controllers/task-drag-controller.ts
features/tasks/controllers/task-resize-controller.ts
features/tasks/controllers/task-progress-controller.ts
features/tasks/controllers/pointer-gesture.ts
features/tasks/timeline-preview-layer.ts