Gantt test2

by Petr Haluza

HTML

<link rel="stylesheet" href="https://www.cssscript.com/demo/svg-gantt-chart-frappe/dist/frappe-gantt.css">
	
	<script src="https://www.cssscript.com/demo/svg-gantt-chart-frappe/dist/frappe-gantt.js"></script>


<div class="gantt-container">
<div class="gantt-target"></div>
</div>

JavaScript

var tasks = [
			{
				start: '2023-01-01',
				end: '2023-02-01',
				name: 'Redesign CSSScript.com',
				id: "Task 0",
				progress: 20
			},
			{
				start: '2023-01-15',
				end: '2023-03-15',
				name: 'Redesign jQueryScript.net',
				id: "Task 1",
				progress: 5,
				dependencies: 'Task 0'
			},
			{
				start: '2023-03-01',
				end: '2023-04-15',
				name: 'Redesign VueScript.Com',
				id: "Task 2",
				progress: 10,
				dependencies: 'Task 1'
			},
			{
				start: '2023-05-01',
				end: '2023-06-15',
				name: 'Redesign ReactScript.Com',
				id: "Task 3",
				progress: 5,
				dependencies: 'Task 2'
			},
			{
				start: '2023-05-15',
				end: '2023-07-30',
				name: 'Redesign 365webresources.Com',
				id: "Task 4",
				progress: 0,
				dependencies: 'Task 2'
			},
			{
				start: '2023-08-01',
				end: '2023-09-15',
				name: 'Redesign ScriptByAI.Com',
				id: "Task 5",
				progress: 0,
				dependencies: 'Task 4',
				custom_class: 'bar-milestone'
			},
			{
				start: '2023-10-01',
				end: '2023-11-30',
				name: 'Create A New Website',
				id: "Task 6",
				progress: 0
			}
		]
		var gantt_chart = new Gantt(".gantt-target", tasks, {
			on_click: task => {
				console.log(task);
			},
			on_date_change: (task, start, end) => {
				console.log(task, start, end);
			},
			on_progress_change: (task, progress) => {
				console.log(task, progress);
			},
			on_view_change: (mode) => {
				console.log(mode);
			},
			view_mode: 'Month',
			language: 'en'
		});
		console.log(gantt_chart);