Get Started

Install Automatically

This requires bower, grunt & grunt-wiredep

  1. Download and install angular-gantt.

    Latest released version is the recommended and stable version.

    bower install angular-gantt --save
    

    Master branch version contains bleeding edge features, but may be very unstable.

    bower install angular-gantt#master --save
    
  2. Wiredep your dependencies to automatically add angular-gantt.js and angular-gantt.css files to your HTML index, with all other dependencies declared in your project.

    grunt wiredep
    

Install using CDNs

  1. You can find released version on CDNs.

    jsDelivr

    //cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css
    

    CDNjs (Replace <version> with latest github tag)

    //cdnjs.cloudflare.com/ajax/libs/angular-gantt/<version>/angular-gantt.min.css
    
  2. Add angular-gantt.min.js and angular-gantt.min.css URLs to your HTML code.

    <head>
      <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/>
    </head>
    <body>
      <script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.js"></script>
    </body>
    
  3. [Optional] Some features of angular-gantt are optional and defined in Plugins. Add angular-gantt-plugins.min.js and angular-gantt-plugins.min.css URLs to your HTML code (after core sources).

    jsDelivr

    //cdn.jsdelivr.net/angular.gantt/latest/angular-gantt-plugins.min.css
    

    CDNjs (Replace <version> with latest github tag)

    //cdnjs.cloudflare.com/ajax/libs/angular-gantt/<version>/angular-gantt-plugins.min.css
    
    <head>
      <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/>
      <link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt-plugins.min.css"/>
    </head>
    <body>
      <script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.js"></script>
      <script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt-plugins.min.js"></script>
    </body>
    

    Some plugins require additional dependencies.

Install Manually

  1. Install dependencies in your application (That's why you should use bower).

  2. Download angular-gantt or use CDNs. Latest released version is available to download on Github and is the recommended and stable version.

    Master branch version contains bleeding edge features, but may be very unstable.

  3. Copy angular-gantt.js and angular-gantt.css located in assets directory to your application source folder.

  4. Add angular-gantt.js and angular-gantt.css files to your HTML code.

    <head>
      <link rel="stylesheet" href="assets/angular-gantt.css"/>
    </head>
    <body>
      <script src="../assets/angular-gantt.js"></script>
    </body>
    
  5. [Optional] Some features of angular-gantt are optional and defined in Plugins. Add angular-gantt-plugins.js and angular-gantt-plugins.css files to your HTML code (after core sources).

    <head>
      <link rel="stylesheet" href="assets/angular-gantt.css"/>
      <link rel="stylesheet" href="assets/angular-gantt-plugins.css"/>
    </head>
    <body>
      <script src="../assets/angular-gantt.js"></script>
      <script src="../assets/angular-gantt-plugins.js"></script>
    </body>
    

    Some plugins require additional dependencies.

Usage

  1. Register gantt in your application dependencies.

    var myApp = angular.module('myApp', ['gantt']);
    
  2. Put gantt directive into your HTML code at the position you would like to show the Gantt chart.

    <div gantt data=data></div>
    
  3. Define data variable in your scope to start using gantt through two-way binding.

    $scope.data = [
        {name: 'row1', tasks: [
            {name: 'task1', from: <date>, to: <date>},
            {name: 'task2', from: <date>, to: <date>}
            ]
        },
        {name: 'row2', tasks: [
            {name: 'task3', from: <date>, to: <date>},
            {name: 'task4', from: <date>, to: <date>}
          ]
        },
      ...
    ]
    
  4. [Optional] You can load plugins like table to display row names on left side, movable to make tasks movable and resizable with mouse and touch events, and tooltips to enable tooltips on mouse over.

    var myApp = angular.module('myApp', ['gantt', 'gantt.table', 'gantt.movable', 'gantt.tooltips']);
    
    <div gantt data=data>
      <gantt-table></gantt-table>
      <gantt-movable></gantt-movable>
      <gantt-tooltips></gantt-tooltips>
    </div>
    
  5. For a sample app see the files in demo/app/ or Plunker.