jQuery Gantt chart, schedule, and timeline bar plugin (original work)

Add-ons

2026-07-26 04:26 3 次浏览 • 0 次下载 41.6KB

jQuery Gantt chart, schedule, and timeline bar plugin (original work)

Plugin description: A flexible and efficient Gantt chart and schedule plugin based on jQuery, supporting custom extensions.

GanttView

A flexible and efficient Gantt chart/schedule plugin based on jQuery, supporting custom extensions.

Supports month/week/hour display modes. Supports changing time by dragging. Expand and collapse. Add/delete and refresh. Highlights holidays. Events: clicked, dblClicked, changed, etc.

Usage

CSS stylesheet

<link rel="stylesheet" type="text/css" media="screen" href="jquery.ganttView.css" />
<link rel="stylesheet" type="text/css" media="screen" href="lib/flick/jquery-ui-1.8.2.custom.css" />

JavaScript script file

<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="lib/gantt-date.js"></script>
<script type="text/javascript" src="lib/holidays.js"></script>
<script type="text/javascript" src="jquery.ganttView.js"></script>

Page layout

1	`<div` `id="ganttChart"></div>`

Component configuration

$("#ganttChart").ganttView({
    ganttScale: "hours", // months  weeks days  hours
    showWeekends: true, // Whether to highlight weekends (changed to show)
    showLine: true, // Whether to display the current timeline (background color is displayed in week mode)
    data: ganttData2, // Data source
    vtHeaderWidth: 300, // Width of the left task panel
    cellWidth: 50, // Cell width (when ganttScale = hours/weeks, the width is recalculated, with a minimum of 50)
    cellHeight: 40, // Cell row height
    titileHeight: 40, // Header row height
    start: new Date(2019, 06, 14), // Minimum time range (adjust the initial time range according to the ganttScale parameter)
    end: new Date(2019, 06, 20), // Maximum time range
    slideWidth: '100%', // Gantt chart width
    excludeWeekends: true, // Exclude the last day of the week
    showDayOfWeek: true, // Whether to display weekdays
    showHolidays: false, // Display holidays
    excludeHolidays: false, // Exclude holidays
    gridHoverL: true, // Whether to display the mouse hover effect (columns)
    gridHoverH: true, // Whether to display the mouse hover effect (rows)
    isUnfold: true, // Display expand/collapse buttons when a module contains more than 2 tasks
    unfoldConfig: false, // Initial expand/collapse state (when a module contains more than 2 tasks and expand/collapse buttons are displayed). true: collapsed
    clicked: function(o) {
        selectedObj = o;
        var data = selectedObj.data('block-data');
        var itemName = data.itemName ? data.itemName : "";
        var seriesName = data.seriesName ? data.seriesName : "";
        var text = data.text ? data.text : "";
        var sYYYY = data.start.getYear();
        sYYYY = sYYYY < 1000 ? sYYYY + 1900 : sYYYY;
        var sMM = data.start.getMonth() + 1;
        var sDD = data.start.getDate();
        var eYYYY = data.end.getYear();
        eYYYY = eYYYY < 1000 ? eYYYY + 1900 : eYYYY;
        var eMM = data.end.getMonth() + 1;
        var eDD = data.end.getDate();
        $('#ganttData-item-id').val(data.itemId);
        $('#ganttData-item-name').val(itemName);
        $('#ganttData-series-id').val(data.seriesId);
        $('#ganttData-series-name').val(seriesName);
        $('#ganttData-series-start').val(sYYYY + "/" + sMM + "/" + sDD);
        $('#ganttData-series-end').val(eYYYY + "/" + eMM + "/" + eDD);
        $('#ganttData-series-text').val(text);
        console.log(`${data.itemId} ${itemName} ${data.seriesId} ${seriesName} ${sYYYY + "/" + sMM + "/" + sDD} ${eYYYY + "/" + eMM + "/" + eDD}`)
    },
 
    dblClicked: function(o) {
        if (selectedObj == null) {
            return;
        }
        if (selectedObj.data('block-data').seriesId == o.data('block-data').seriesId) {
            $('#ganttData-reset').trigger("click");
        }
    },
    changed: function(o) {
        o.trigger("click");
    }
});

Note

* Supports month, week, and hour views.

* When selecting a month, remember to adjust the start/end times (months in the default time format start from 0).

* When selecting week/hour mode, the plugin automatically ignores the year and month.

* The plugin automatically displays expand/collapse buttons when a module contains more than 2 tasks.

* The plugin supports highlighting the Holidays table. Set excludeHolidays: true to exclude holidays.

* cellWidth: Table cell width (when ganttScale = hours/weeks, the width is recalculated, with a minimum of 50) to prevent the table from not filling the entire screen.

* showLine: Whether to display the current time marker (displayed as a line in hour mode and as a highlighted cell in week/month mode).

* Version compatibility: For jquery-ui-1.8.2/jquery-1.4.2, a higher jQuery version can be used, but higher jQuery UI versions are not currently supported.

* All chart styles can be customized or disabled.