Earlier I asked you how to use custom data with visual option true, so I added the source that applies custom colors to the code you gave me, but it doesn’t work.
gantt.plugins({
export_api: true
})
gantt.config.min_column_width = 40;
function exportData() {
// Backup the original date range
const backupStartDate = gantt.copy(gantt.config.start_date);
const backupEndDate = gantt.copy(gantt.config.end_date);
// Get tasks within the current date range
const tasks = gantt.copy(gantt.getTaskByTime());
const json = tasks.map(task => {
task.text += "_mod";
return task;
});
// Calculate min and max date range based on tasks
let minDate = gantt.date.add(json[0].start_date, -2, 'day');
let maxDate = gantt.date.add(json[0].end_date, 2, 'day');
json.forEach(task => {
if (+task.start_date < +minDate) minDate = new Date(task.start_date);
if (+task.end_date > +maxDate) maxDate = new Date(task.end_date);
});
// Update Gantt date range
gantt.config.start_date = minDate;
gantt.config.end_date = maxDate;
gantt.render();
// Map task data for export
json.forEach(task => {
task.$start = gantt.getScale().trace_indexes[+task.start_date];
task.$end = gantt.getScale().trace_indexes[+task.end_date];
task.$type = task.type || 'task';
task.$text = task.text;
});
// Export to Excel
gantt.exportToExcel({
visual: "base-colors",
cellColors: true,
columns: [
{ id: "text", header: "Action" },
{ id: "start_date", header: "Start date", type: "date" },
{ id: "end_date", header: "End date", type: "date" },
{ id: "duration", header: "Duration" },
{ id: "owner", header: "Who" },
{ id: "progress", header: "% Done", type: "number" }
],
data: json
});
// Restore original date range
gantt.config.start_date = backupStartDate;
gantt.config.end_date = backupEndDate;
gantt.render();
}
gantt.templates.timeline_cell_class = function (task, date) {
if (date.getDay() == 0 || date.getDay() == 6) {
return “weekend”;
}
};
const styleNames = [
“purple_color”,
“blue_color”,
“orange_color”,
“green_color”,
“gray_color”,
“brown_color”,
“red_color”,
“green_color”,
]
gantt.templates.task_class = function (start, end, task) {
return styleNames[task.$level]
}
gantt.init(“gantt_here”);
const data = {
tasks: [
{ id: 1, text: ‘Task #1’, start_date: ‘02-05-2024 00:00’, duration: 5, parent: ‘0’, open: true, type: ‘project’ },
{ id: 2, text: ‘Task #1.1’, start_date: ‘03-05-2024 00:00’, duration: 2, parent: ‘1’ },
{ id: 3, text: ‘Task #1.2’, start_date: ‘06-05-2024 00:00’, duration: 3, parent: ‘1’ },
{ id: 4, text: ‘Task #1.3’, start_date: ‘10-05-2024 00:00’, duration: 2, parent: ‘1’ },
{ id: 5, text: ‘Task #1.4’, start_date: ‘13-05-2024 00:00’, duration: 2, parent: ‘1’ },
{ id: 6, text: ‘Task #1.5’, start_date: ‘16-05-2024 00:00’, duration: 2, parent: ‘1’ },
{ id: 7, text: ‘Task #1.6’, start_date: ‘19-05-2024 00:00’, duration: 2, parent: ‘1’ },
{ id: 8, text: ‘Task #1.7’, start_date: ‘22-05-2024 00:00’, duration: 2, parent: ‘1’ },
{ id: 9, text: ‘Task #1.8’, start_date: ‘25-05-2024 00:00’, duration: 2, parent: ‘1’ }
],
links: [
{ id: ‘23’, source: ‘2’, target: ‘3’, type: ‘0’ },
{ id: ‘34’, source: ‘3’, target: ‘4’, type: ‘0’ },
{ id: ‘45’, source: ‘4’, target: ‘5’, type: ‘0’ },
{ id: ‘56’, source: ‘5’, target: ‘6’, type: ‘0’ },
{ id: ‘67’, source: ‘6’, target: ‘7’, type: ‘0’ },
{ id: ‘78’, source: ‘7’, target: ‘8’, type: ‘0’ },
{ id: ‘89’, source: ‘8’, target: ‘9’, type: ‘0’ }
]
};
gantt.parse(data);
body, html { width: 100%; height: 100%; margin: unset; } .weekend { background-color: beige !important; } .green_color { background: green; } .purple_color { background: purple; } .blue_color { background: blue; } .orange_color { background: orange; } .gray_color { background: gray; } .red_color { background: red; } .brown_color { background: brown; } .gantt_task_progress { background-color: rgba(33, 33, 33, 0.17); }