Skip to content

uzbeki/jquery-gantt-chart

 
 

Repository files navigation

jQuery Gantt Chart
jQuery Gantt Chart is a simple and fast plugin that implements gantt functionality as a jQuery component.

GitHub release Npm package version GitHub license Npm package total downloads

jQuery

This is a fork of the original jquery-gantt. It was not maintained for a long time and I decided to fork it and make it work with modern browsers and jQuery versions. I also added some new features and fixed some bugs.

Installation

  • Git clone
  • yarn add @uzbeki/jquery-gantt-chart, or
  • npm install @uzbeki/jquery-gantt-chart

About

jQuery Gantt Chart is a modern and fast plugin that implements gantt functionality as a jQuery component with JS Module support.

Plugin was tested and should work on: All major browsers that support ES6 or above.

Features:

  • 📟 Pagination support, page data handler set inside onGetPage option
  • 👉 Customizable cell size with cellSize option
  • 🎨 Customizable task(bar) colors with data[i].values[j].customClass
  • 🏷️ Display short description as hints
  • 🖱️ Scroll with Shift+mouseWheel, or faster scroll with Ctrl+Shift+mouseWheel
  • 📅 Mark holidays or today
  • 🔍 Zoom in/out
  • Drag Sortable Header Support
  • 🆕 ES Module support
  • 🆕 Remember Zoom Level and Header Order (page by page remembering)
  • 🆕 Resizable Bars from both left and righ ends with barOptions.resizability options
  • 🆕 Movable Bars (vertial and horizontal support) with barOptions.movability options
  • 🆕 Easy to sort bars to align them one after the another

Requirements:

  • jQuery v1.10.2 or above:
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

Usage

Simply include the plugin and its stylesheet in your html file and call it on a div element.

<link rel="stylesheet" href="./src/jquery.gantt.css">
<script type="module" src="./src/index.js"></script>

Create a div element and call the plugin on it

<script type="module">
  $("#gantt").gantt({
      source: data, // json data
      scale: "days",
      onItemClick: console.log,
      onAddClick: console.log,
      onRender: () => console.log("chart rendered"),
      onGetPage: (page) => yourPageHandler(page),
    });
</script>

Customizable Options

  • source - json data, defaults to {}
  • scrollToToday - scroll to today, defaults to true
  • zoomLevelKey - key to save zoom level, defaults to jquery-gantt-chart-zoom-level
  • rememberZoomLevel - remember current zoom level, defaults to true
  • rememberHeaderOrder - remember header order, defaults to true
  • scale - scale type ("months" | "weeks" | "days" | "half days" | "every 8 hours" | "every 6 hours" | "every 3 hours" | "every hour"), defaults to days
  • maxScale - maximum scale, defaults to months
  • minScale - minimum scale, defaults to hours
  • cellSize - cell size in pixels, defaults to 24
  • holidays - array of holidays, defaults to []
  • itemsPerPage - items per page, defaults to 10
  • dow - days of week, defaults to ["S", "M", "T", "W", "T", "F", "S"]
  • months - months, defaults to ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
  • barOptions - bar options, defaults to DefaultBarOptions
  • onItemClick - callback on item click, called with item object
  • onAddClick - callback on add button click, called with date and row data
  • onRender - callback on chart render
  • onGetPage - callback on page change, called with page number

source is an object of the following type

type SourceData = {
  data: Array<{
    id: number;
    name: string;
    desc: string;
    values: Array<{
      from: Date;
      to: Date;
      label: string;
      desc: string;
      customClass: string; // for coloring bars
    }>;
  }>;
  // pagination
  currentPage: number;
  pageCount: number;
  itemsPerPage: number;
};

DefaultBarOptions

const DefaultBarOptions = {
  resizability: {
    minWidth: DEFAULT_CELL_SIZE, // 24
    maxWidth: Infinity, // maximum width
    onResize: newWidth => {}, // callback on resize
    stepSize: DEFAULT_CELL_SIZE, // 24
    handleVisibility: "hover", // "hover" | "click" | "always"
    leftHandle: false, // show left handle to resize
    rightHandle: true, // show right handle to resize
  },
  movability: {
    stepSize: DEFAULT_CELL_SIZE, // 24
    horizontal: true, // allow horizontal movement
    vertical: false, // allow vertical movement
    minX: 0, // minimum x position
    minY: 0, // minimum y position
    maxX: Number.POSITIVE_INFINITY, // maximum x position
    maxY: Number.POSITIVE_INFINITY, // maximum y position
  };
};

License

MIT