Get started with jQuery.Gantt CDN

(MIT OR GPL-2.0) licensed

JQuery.Gantt is a library for creating interactive Gantt charts in the browser.

Tags:
  • jquery
  • gantt
  • chart

Stable version

Copied!

How to start using jQuery.Gantt CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jQuery.Gantt CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/css/jquery-ui.min.css" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.cdnhub.io/jQuery.Gantt/1.1.0/css/jquery.gantt.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.cdnhub.io/jQuery.Gantt/1.1.0/js/jquery.fn.gantt.min.js"></script>
</head>
<body>
    <div id="gantt"></div>

    <script>
        $(function() {
            $('#gantt').gantt({
                dataSource: {
                    tasks: [
                        { id: 1, name: 'Task 1', start: '2022-01-01', duration: 5 },
                        { id: 2, name: 'Task 2', start: '2022-01-05', duration: 3 },
                        { id: 3, name: 'Task 3', start: '2022-01-06', duration: 4 },
                        { id: 4, name: 'Task 4', start: '2022-01-08', duration: 2 }
                    ]
                },
                grid: {
                    height: 'auto'
                },
                scale: {
                    unit: 'day'
                },
                view: {
                    startDate: '2022-01-01',
                    endDate: '2022-01-10'
                }
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions