<|start_filename|>src/plugins/table/table.css<|end_filename|>
.gantt-table-header {
    overflow: hidden;
    position: relative;
}

.gantt-table-header-row {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.gantt-table-header-row span.gantt-label-text {
    font-weight: bold;
    white-space: nowrap;
    display: inline-block;
    padding-top: 0.5em;
    overflow: hidden;
    text-overflow: clip;
}

div.gantt-table-content {
    overflow: hidden;
}

.gantt-side-content-table > div.gantt-table-column {
    display: inline-block;
    overflow: hidden;
}


<|start_filename|>plunker/style.css<|end_filename|>
html, body, div[ng-app], div[gantt] {
    height: 100%;
}

.gantt-row-milestone {
    font-weight: bold;
    vertical-align: middle;
    color: white;
}


<|start_filename|>docs/plugins/dependencies/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/plugins/dependencies/">
        <link rel="shortcut icon" href="../../img/favicon.ico">

        <title>Dependencies - angular-gantt</title>

        <link href="../../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../../css/prettify-1.0.css" rel="stylesheet">
        <link href="../../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="../..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../../configuration/data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/api">API</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../groups">Groups</a>
                        </li>
                    
                        <li class="active">
                            <a href=".">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../../contribute">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../../faq">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../groups">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../sortable">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#dependencies">Dependencies</a></li>
        
            <li><a href="#dependency">Dependency</a></li>
        
            <li><a href="#usage">Usage</a></li>
        
            <li><a href="#attributes">Attributes</a></li>
        
            <li><a href="#model">Model</a></li>
        
            <li><a href="#api">API</a></li>
        
            <li><a href="#tips">Tips</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="dependencies">Dependencies</h1>
<p>Add support for dependency links between tasks using <a href="https://jsplumbtoolkit.com/">jsPlumb</a>.</p>
<h2 id="dependency">Dependency</h2>
<p><a href="https://jsplumbtoolkit.com/">jsPlumb</a></p>
<h2 id="usage">Usage</h2>
<pre><code>angular.module('myApp', ['gantt', 'gantt.dependencies']);
</code></pre>
<!-- -->

<pre><code>&lt;div gantt&gt;
    &lt;gantt-dependencies enabled="true"
                        read-only="false"
                        js-plumb-defaults="{
                                         Endpoint: ['Dot', {radius: 7}],
                                         Connector: 'Flowchart'
                                         }"
                        endpoints="[...]"
                        fallback-endpoints="[...]"&gt;
    &lt;/gantt-dependencies&gt;
&lt;/div&gt;
</code></pre>
<h2 id="attributes">Attributes</h2>
<ul>
<li>
<h3 id="enabled">enabled</h3>
<p>Enable dependencies display.</p>
<p>default: <code>true</code></p>
</li>
<li>
<h3 id="read-only">read-only</h3>
<p>If enabled, existing dependencies will be displayed, but it won't be possible to edit existing dependencies or 
create new dependencies using mouse.</p>
<p>default: <code>false</code></p>
</li>
<li>
<h3 id="js-plumb-defaults">js-plumb-defaults</h3>
<p>Default settings object for the underlying jsPlumb instance. See 
<a href="https://jsplumbtoolkit.com/community/doc/defaults.html">Configuring Defaults</a> of 
<a href="https://jsplumbtoolkit.com/community/doc/home.html">jsPlumb documentation</a>.</p>
<p>default: </p>
<pre><code>Endpoint: ['Dot', {radius: 4}],
EndpointStyle: {fillStyle: '#456', strokeStyle: '#456', lineWidth: 1},
PaintStyle: {
    strokeWidth: 3,
    stroke: 'rgb(68, 85, 102)'
},
Connector: 'Flowchart',
ConnectionOverlays: [['Arrow', {location: 1, length: 12, width: 12}]]
</code></pre>
</li>
<li>
<h3 id="endpoints">endpoints</h3>
<p>Array of endpoints that will be create for each task. See
<a href="https://jsplumbtoolkit.com/community/apidocs/classes/Endpoint.html">Endpoint class</a> of 
<a href="https://jsplumbtoolkit.com/community/doc/home.html">jsPlumb documentation</a>.</p>
<p>default:</p>
<p>[
       {
           anchor:'Left',
           isSource:false,
           isTarget:true,
           maxConnections: -1,
           cssClass: 'gantt-endpoint start-endpoint target-endpoint'
           overlays:[
               ['Custom', {create:createLeftOverlay}]
           ]
       },
       {
           anchor:'Right',
           isSource:true,
           isTarget:false,
           maxConnections: -1,
           cssClass: 'gantt-endpoint end-endpoint source-endpoint'
           overlays:[
               ['Custom', {create:createRightOverlay}]
           ]
       }
   ];</p>
</li>
<li>
<h3 id="fallback-endpoints">fallback-endpoints</h3>
<p>Endpoints used to display start/end of connections that links invisible tasks (out of range, collapsed, ...).</p>
<p>default : </p>
<pre><code>[
    {
        endpoint: 'Blank',
        anchor: 'Left',
        isSource: false,
        isTarget: true,
        maxConnections: 0,
        cssClass: 'gantt-endpoint start-endpoint fallback-endpoint',
        overlays: [
            ['Custom', {create: createLeftFallbackOverlay}]
        ]
    },
    {
        endpoint: 'Blank',
        anchor: 'Right',
        isSource: true,
        isTarget: false,
        maxConnections: 0,
        cssClass: 'gantt-endpoint end-endpoint fallback-endpoint',
        overlays: [
            ['Custom', {create: createRightFallbackOverlay}]
        ]
    }
]
</code></pre>
</li>
<li>
<h3 id="conflict-checker">conflict-checker</h3>
<p>Check for conflicts in dependent tasks and mark invalid tasks with <code>gantt-task-overlaps</code> CSS class.</p>
<p>default : false</p>
</li>
</ul>
<h2 id="model">Model</h2>
<p>Task can specify a <code>dependencies</code> field containing a single or a list of objects.</p>
<p>Each object defines the opposite side or the dependency, using either <code>from</code> or <code>to</code> property. <code>connectParameters</code> field
can optionnaly be set to an object that will be used for each related 
<a href="https://jsplumbtoolkit.com/community/doc/connections.html#programmatic">jsPlumb.connect(...)</a> function call.</p>
<pre><code>{
  ...
  // Inside Task object
  'dependencies': [{
    'from': &lt;taskId&gt;,
    'connectParameters': {...} // Parameters given to jsPlumb.connect() function call.
  }]
}

{
  ...
  // Inside Task object
  'dependencies': [{
    'to': &lt;taskId&gt;,
    'connectParameters': {...} // Parameters given to jsPlumb.connect() function call.
  }]
}

{
  ...
  // Inside Task object or Row object
  'dependencies': false // Disable dependencies support for this task or row
}
</code></pre>
<h2 id="api">API</h2>
<h3 id="methods">Methods</h3>
<ul>
<li><strong>api.dependencies.refresh(tasks)</strong></li>
</ul>
<p>Refresh the view with dependencies data from the model.
  tasks is an array of Task objects to refresh, or undefined to refresh the whole chart.</p>
<h3 id="events">Events</h3>
<ul>
<li><strong>api.dependencies.on.add(dependency)</strong>, <strong>api.dependencies.on.remove(dependency)</strong>, <strong>api.dependencies.on.change(dependency, oldDependency)</strong></li>
</ul>
<p>A dependency was created, removed or changed.</p>
<h2 id="tips">Tips</h2>
<ul>
<li>Display dependencies related to a task only</li>
</ul>
<p><code>data-fromId</code> and <code>data-toId</code> attributes are added to svg canvas used to display dependency links.</p>
<p>So it's possible with CSS to hide all dependencies but thoses related to a given task id.</p>
<pre><code class="css">.jtk-connector {
    display: none;
}

.jtk-connector.jtk-dragging {
    display: inherit;
}

.jtk-connector[data-fromId='Product list view'] {
    display: inherit;
}

.jtk-connector[data-toId='Product list view'] {
    display: inherit;
}
</code></pre>

<p>For more information, see <a href="https://jsplumbtoolkit.com/community/doc/styling-via-css.html">Styling via css</a> from <a href="https://jsplumbtoolkit.com/community/doc/home.html">jsPlumb documentation</a>.</p>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../../js/bootstrap-3.0.3.min.js"></script>
        <script src="../../js/prettify-1.0.min.js"></script>
        <script src="../../js/base.js"></script>
        <script src="../../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>build/webpack.base.conf.js<|end_filename|>
var path = require('path')
var utils = require('./utils')
var config = require('../config')

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    library: '[name]',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.ts', '.json'],
    modules: [
      resolve('src'),
      'node_modules'
    ]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test'), resolve('demo')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.ts$/,
        enforce: 'pre',
        loader: 'tslint-loader',
        include: [resolve('src'), resolve('test'), resolve('demo')],
        options: {
          formatter: 'grouped',
          formattersDirectory: 'node_modules/custom-tslint-formatters/formatters'
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('demo')]
      },
      {
        test: /\.ts$/,
        use: [
          /*
          {
            loader: 'angular-hot-loader'
          },
          */
          {
            loader: 'ng-annotate-loader'
          },
          {
            loader: 'awesome-typescript-loader',
            options: {
              useBabel: true,
              useCache: true
            }
          }],
        include: [resolve('src'), resolve('test'), resolve('demo')]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'ngtemplate-loader',
            options: {
              relativeTo: path.resolve(__dirname, '..', 'src') + '/'
            }
          },
          {
          loader: 'html-loader',
          options: {
            minimize: true
          }
        }],
        exclude: [resolve('demo/index.html')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}


<|start_filename|>docs/plugins/table/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/plugins/table/">
        <link rel="shortcut icon" href="../../img/favicon.ico">

        <title>Table - angular-gantt</title>

        <link href="../../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../../css/prettify-1.0.css" rel="stylesheet">
        <link href="../../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="../..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../../configuration/data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/api">API</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../labels">Labels</a>
                        </li>
                    
                        <li class="active">
                            <a href=".">Table</a>
                        </li>
                    
                        <li >
                            <a href="../tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../../contribute">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../../faq">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../labels">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../tree">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#table">Table</a></li>
        
            <li><a href="#usage">Usage</a></li>
        
            <li><a href="#attributes">Attributes</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="table">Table</h1>
<p>Display a table on the side with fully customizable columns count and data.</p>
<h2 id="usage">Usage</h2>
<pre><code>angular.module('myApp', ['gantt', 'gantt.table']);
</code></pre>
<!-- -->

<pre><code>&lt;div gantt&gt;
  &lt;gantt-table enabled="..."&gt;
  &lt;/gantt-table&gt;
&lt;/div&gt;
</code></pre>
<h2 id="attributes">Attributes</h2>
<ul>
<li>
<h4 id="enabled">enabled</h4>
<p>Enable display of table.</p>
<p>default: <code>true</code></p>
</li>
<li>
<h4 id="columns">columns</h4>
<p>List of row expressions that will be used to build columns. Those expression will provide values for each row.</p>
<p>default: <code>['model.name']</code></p>
</li>
<li>
<h4 id="formatter">formatter</h4>
<p>Function <code>formatter(value, column, row)</code> used to format each value. The function returns formatted value.</p>
<p>default: <code>{'model.name': 'Name'}</code></p>
</li>
<li>
<h4 id="formatters">formatters</h4>
<p>Associative object to customize formatter for each cell. 
Key is the column expression defined in <code>columns</code> attribute, and value is a formatter function <code>formatter(value, column, row)</code>
returning formatted value.
It can be used if some columns requires special formatters. If a formatter is undefined for the column, it will use then formatter 
defined in <code>formatter</code> attribute</p>
<pre><code>{'from': function(value, column, row) {
  if (value) {
    return value.format('lll');
  }
  return value;
  }
}
</code></pre>
</li>
<li>
<h4 id="headers">headers</h4>
<p>Associative object to customize header for each column. Key is the column expression defined in <code>columns</code> attribute,
and value is the header to display.</p>
<p>ex: <code>{'model.name': 'Label'}</code></p>
</li>
<li>
<h4 id="contents">contents</h4>
<p>Associative object to customize values content. Key is the column expression defined in <code>columns</code> attribute,
and value is the content to display for each column row. Content can contain HTML and will be automatically 
compiled. Default content is <code>{{getValue()}}</code>.</p>
<p>ex: <code>{'model.name': '&lt;span class="glyphicon glyphicon-asterisk"&gt;&lt;/span&gt; {{getValue()}}'}</code></p>
<p>Contents object can also be be defined for a specific <code>Row</code> object using an object property named <code>columnContents</code></p>
<pre><code>{
  ...
  // Inside Row object
  'columnContents': {
    'model.name': '...',
    'from': '...',
    'to': '...'
  }
}
</code></pre>
</li>
<li>
<h4 id="header-contents">header-contents</h4>
<p>Associative object to customize header content. Key is the column expression defined in <code>columns</code> attribute,
and value is the content to display for each column row. Content can contain HTML and will be automatically 
compiled. Default content is <code>{{getHeader()}}</code>.</p>
<p>ex: <code>{'model.name': '&lt;span class="glyphicon glyphicon-asterisk"&gt;&lt;/span&gt; {{getHeader()}}'}</code></p>
</li>
<li>
<h4 id="classes">classes</h4>
<p>Associative object to customize CSS classes. Key is the column expression defined in <code>columns</code> attribute,
and value is the class name to apply to column.</p>
<p>ex: <code>{'model.name': 'gantt-column-name'}</code></p>
</li>
<li>
<h4 id="header-formatter">header-formatter</h4>
<p>Formatter function <code>formatter(column)</code> use to format each header. The function returns formatted header value.</p>
</li>
</ul>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../../js/bootstrap-3.0.3.min.js"></script>
        <script src="../../js/prettify-1.0.min.js"></script>
        <script src="../../js/base.js"></script>
        <script src="../../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>docs/configuration/data/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/configuration/data/">
        <link rel="shortcut icon" href="../../img/favicon.ico">

        <title>Data - angular-gantt</title>

        <link href="../../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../../css/prettify-1.0.css" rel="stylesheet">
        <link href="../../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="../..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li class="active">
                            <a href=".">Data</a>
                        </li>
                    
                        <li >
                            <a href="../timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../api">API</a>
                        </li>
                    
                        <li >
                            <a href="../write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../../plugins/labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../../contribute">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../../faq">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../../get-started">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../timespans">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#data">Data</a></li>
        
            <li><a href="#row">Row</a></li>
        
            <li><a href="#task">Task</a></li>
        
            <li><a href="#css-selectors">CSS Selectors</a></li>
        
            <li><a href="#example">Example</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="data">Data</h1>
<p><a href="../attributes#data">data</a> is the <a href="../attributes">attribute</a> used to load data into <code>angular-gantt</code>.</p>
<p>This attribute support two-way binding. Modifications made to <code>data</code> will automatically be displayed in <code>angular-gantt</code>,
and modification made to <code>angular-gantt</code> will be applied to <code>data</code>.</p>
<p><code>data</code> is a list of <code>Row</code> objects. Each <code>Row</code> object contains a list of <code>Task</code> object defined in <code>tasks</code> property. </p>
<h2 id="row">Row</h2>
<pre><code>{
  name: "...", // Name shown on the left side of each row.
  id: "...",  // Unique id of the row (Optional).
  height: "..." // Height of the row (Optional).
  color: "..." , // Color of the task in HEX format (Optional).
  classes: &lt;Array|String&gt; // Array or String of class names which should be applied to the task. See ng-class documentation for details (Optional).
  content: "...", // Content used in labels (Optional).
  tasks: [] // Array containing &lt;Task&gt; tasks to add in this row.
}
</code></pre>
<h2 id="task">Task</h2>
<pre><code>{
  name: "...", // Name shown on top of each task.
  from: &lt;Date&gt;, // Date can be a String, Timestamp, Date object or moment object.
  to: &lt;Date&gt;, // Date can be a String, Timestamp, Date object or moment object.
  id: "...",  // Unique id of the task (Optional).
  color: "..." , // Color of the task in HEX format (Optional).
  classes: &lt;Array|String&gt; // Array or String of class names which should be applied to the task. See ng-class documentation for details (Optional).
  priority: &lt;Number&gt; // Defines which of an overlapping task is on top (Optional). Tip: Leave property away for default behaviour.
  data: &lt;Any&gt; // Custom object. Use this to attach your own data (Optional).
  content: "...", // Content used in labels (Optional).
}
</code></pre>
<h2 id="css-selectors">CSS Selectors</h2>
<p>CSS Classes defined in model with <code>classes</code> property are applied to multiple elements for each row and task. </p>
<p>Using single class selector like <code>.custom-row</code> or <code>.custom-task</code> may not work as expected. You should use following selectors.</p>
<h3 id="row-selectors">Row selectors</h3>
<p>Define <code>custom-row</code> class in the row model.</p>
<pre><code>{
  name: "<NAME>",
  classes: "custom-row",
  tasks: [...]
}
</code></pre>
<p>Use the following selectors to customize this particular row.</p>
<pre><code>.gantt-row.custom-row .gantt-row-background {
  // Customize background of the row
  background: blue;
  opacity: 0.3;
}

.gantt-row.custom-row .gantt-row-content {
  // Customize content of the row
  weight: bolder;
}
</code></pre>
<h3 id="task-selectors">Task selectors</h3>
<p>Define <code>custom-task</code> class in the task model.</p>
<pre><code>{
  name: "<NAME>",
  classes: "custom-task",
}
</code></pre>
<p>Use the following selectors to customize this particular task.</p>
<pre><code>.gantt-task.custom-task .gantt-task-background {
  // Customize background of the task
  background: blue;
  opacity: 0.3;
}

.gantt-task.custom-task .gantt-task-content {
  // Customize content of the task
  weight: bolder;
}

.gantt-task.custom-task .gantt-task-foreground {
  // Customize foreground of the task
}
</code></pre>
<h2 id="example">Example</h2>
<pre><code>&lt;div gantt data=data&gt;&lt;/div&gt;
</code></pre>
<!-- -->

<pre><code>$scope.data = [{name: 'Milestones', height: '3em', sortable: false, classes: 'gantt-row-milestone', color: '#45607D', tasks: [
                   // Dates can be specified as string, timestamp or javascript date object. The data attribute can be used to attach a custom object
                   {name: 'Kickoff', color: '#93C47D', from: '2013-10-07T09:00:00', to: '2013-10-07T10:00:00', data: 'Can contain any custom data or object'},
                   {name: 'Concept approval', color: '#93C47D', from: new Date(2013, 9, 18, 18, 0, 0), to: new Date(2013, 9, 18, 18, 0, 0), est: new Date(2013, 9, 16, 7, 0, 0), lct: new Date(2013, 9, 19, 0, 0, 0)},
                   {name: 'Development finished', color: '#93C47D', from: new Date(2013, 10, 15, 18, 0, 0), to: new Date(2013, 10, 15, 18, 0, 0)},
                   {name: 'Shop is running', color: '#93C47D', from: new Date(2013, 10, 22, 12, 0, 0), to: new Date(2013, 10, 22, 12, 0, 0)},
                   {name: 'Go-live', color: '#93C47D', from: new Date(2013, 10, 29, 16, 0, 0), to: new Date(2013, 10, 29, 16, 0, 0)}
               ], data: 'Can contain any custom data or object'},
               {name: 'Status meetings', tasks: [
                   {name: 'Demo #1', color: '#9FC5F8', from: new Date(2013, 9, 25, 15, 0, 0), to: new Date(2013, 9, 25, 18, 30, 0)},
                   {name: 'Demo #2', color: '#9FC5F8', from: new Date(2013, 10, 1, 15, 0, 0), to: new Date(2013, 10, 1, 18, 0, 0)},
                   {name: 'Demo #3', color: '#9FC5F8', from: new Date(2013, 10, 8, 15, 0, 0), to: new Date(2013, 10, 8, 18, 0, 0)},
                   {name: 'Demo #4', color: '#9FC5F8', from: new Date(2013, 10, 15, 15, 0, 0), to: new Date(2013, 10, 15, 18, 0, 0)},
                   {name: 'Demo #5', color: '#9FC5F8', from: new Date(2013, 10, 24, 9, 0, 0), to: new Date(2013, 10, 24, 10, 0, 0)}
               ]},
               {name: 'Kickoff', movable: {allowResizing: false}, tasks: [
                   {name: 'Day 1', color: '#9FC5F8', from: new Date(2013, 9, 7, 9, 0, 0), to: new Date(2013, 9, 7, 17, 0, 0),
                       progress: {percent: 100, color: '#3C8CF8'}, movable: false},
                   {name: 'Day 2', color: '#9FC5F8', from: new Date(2013, 9, 8, 9, 0, 0), to: new Date(2013, 9, 8, 17, 0, 0),
                       progress: {percent: 100, color: '#3C8CF8'}},
                   {name: 'Day 3', color: '#9FC5F8', from: new Date(2013, 9, 9, 8, 30, 0), to: new Date(2013, 9, 9, 12, 0, 0),
                       progress: {percent: 100, color: '#3C8CF8'}}
               ]},
               {name: 'Create concept', tasks: [
                   {name: 'Create concept', content: '&lt;i class="fa fa-cog" ng-click="scope.handleTaskIconClick(task.model)"&gt;&lt;/i&gt; {{task.model.name}}', color: '#F1C232', from: new Date(2013, 9, 10, 8, 0, 0), to: new Date(2013, 9, 16, 18, 0, 0), est: new Date(2013, 9, 8, 8, 0, 0), lct: new Date(2013, 9, 18, 20, 0, 0),
                       progress: 100}
               ]},
               {name: 'Finalize concept', tasks: [
                   {name: 'Finalize concept', color: '#F1C232', from: new Date(2013, 9, 17, 8, 0, 0), to: new Date(2013, 9, 18, 18, 0, 0),
                       progress: 100}
               ]},
               {name: 'Development', children: ['Sprint 1', 'Sprint 2', 'Sprint 3', 'Sprint 4'], content: '&lt;i class="fa fa-file-code-o" ng-click="scope.handleRowIconClick(row.model)"&gt;&lt;/i&gt; {{row.model.name}}'},
               {name: 'Sprint 1', tooltips: false, tasks: [
                   {name: 'Product list view', color: '#F1C232', from: new Date(2013, 9, 21, 8, 0, 0), to: new Date(2013, 9, 25, 15, 0, 0),
                       progress: 25}
               ]},
               {name: 'Sprint 2', tasks: [
                   {name: 'Order basket', color: '#F1C232', from: new Date(2013, 9, 28, 8, 0, 0), to: new Date(2013, 10, 1, 15, 0, 0)}
               ]},
               {name: 'Sprint 3', tasks: [
                   {name: 'Checkout', color: '#F1C232', from: new Date(2013, 10, 4, 8, 0, 0), to: new Date(2013, 10, 8, 15, 0, 0)}
               ]},
               {name: 'Sprint 4', tasks: [
                   {name: 'Login &amp; Signup &amp; Admin Views', color: '#F1C232', from: new Date(2013, 10, 11, 8, 0, 0), to: new Date(2013, 10, 15, 15, 0, 0)}
               ]},
               {name: 'Hosting'},
               {name: 'Setup', tasks: [
                   {name: 'HW', color: '#F1C232', from: new Date(2013, 10, 18, 8, 0, 0), to: new Date(2013, 10, 18, 12, 0, 0)}
               ]},
               {name: 'Config', tasks: [
                   {name: 'SW / DNS/ Backups', color: '#F1C232', from: new Date(2013, 10, 18, 12, 0, 0), to: new Date(2013, 10, 21, 18, 0, 0)}
               ]},
               {name: 'Server', parent: 'Hosting', children: ['Setup', 'Config']},
               {name: 'Deployment', parent: 'Hosting', tasks: [
                   {name: 'Depl. &amp; Final testing', color: '#F1C232', from: new Date(2013, 10, 21, 8, 0, 0), to: new Date(2013, 10, 22, 12, 0, 0), 'classes': 'gantt-task-deployment'}
               ]},
               {name: 'Workshop', tasks: [
                   {name: 'On-side education', color: '#F1C232', from: new Date(2013, 10, 24, 9, 0, 0), to: new Date(2013, 10, 25, 15, 0, 0)}
               ]},
               {name: 'Content', tasks: [
                   {name: 'Supervise content creation', color: '#F1C232', from: new Date(2013, 10, 26, 9, 0, 0), to: new Date(2013, 10, 29, 16, 0, 0)}
               ]},
               {name: 'Documentation', tasks: [
                   {name: 'Technical/User documentation', color: '#F1C232', from: new Date(2013, 10, 26, 8, 0, 0), to: new Date(2013, 10, 28, 18, 0, 0)}
               ]}]
</code></pre>
<p><em>This example use additional <a href="../plugins">plugins</a> data.</em></p>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../../js/bootstrap-3.0.3.min.js"></script>
        <script src="../../js/prettify-1.0.min.js"></script>
        <script src="../../js/base.js"></script>
        <script src="../../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>src/plugins/groups/groups.css<|end_filename|>
.gantt-task-group {
    position: absolute;

    background: rgb(99, 136, 205);

    height: 30%;

    top: -25%;
    bottom: 0;
    margin: auto;
}

.gantt-task-group-left-main,
.gantt-task-group-right-main {
    position: absolute;

    width: 12px;
    height: 100%;
    background: rgb(99, 136, 205);

    top: 0;
    bottom: 0;
    margin: auto 0;
}

.gantt-task-group-left-main {
    left: -6px;
}

.gantt-task-group-right-main {
    right: -6px;
}

.gantt-task-group-left-symbol,
.gantt-task-group-right-symbol {
    position: absolute;

    width: 0;
    height: 50%;

    top: 75%;
    bottom: 0;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 12px solid rgb(99, 136, 205);
}

.gantt-task-group-left-symbol {
    left: -6px;
}

.gantt-task-group-right-symbol {
    right: -6px;
}

.gantt-task-overview {
    height: 40%;
    top: 40%;
    -webkit-filter: grayscale(0.6);
    filter: grayscale(0.6);
}

.gantt-task-overview .gantt-task-content {
    display: none;
}


<|start_filename|>docs/configuration/api/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/configuration/api/">
        <link rel="shortcut icon" href="../../img/favicon.ico">

        <title>API - angular-gantt</title>

        <link href="../../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../../css/prettify-1.0.css" rel="stylesheet">
        <link href="../../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="../..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../customize">Customize</a>
                        </li>
                    
                        <li class="active">
                            <a href=".">API</a>
                        </li>
                    
                        <li >
                            <a href="../write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../../plugins/labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../../contribute">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../../faq">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../customize">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../write_plugin">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#api">API</a></li>
        
            <li><a href="#events">Events</a></li>
        
            <li><a href="#methods">Methods</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="api">API</h1>
<p>angular-gantt has an API to call methods of the component and listen or raise events.</p>
<p>Register the API Object using <code>api</code> attribute.</p>
<pre><code>&lt;div gantt api="registerApi"&gt;&lt;/div&gt;
</code></pre>
<!-- -->

<pre><code>$scope.registerApi = function(api) {
  api.core.on.ready($scope, function () {
    // Call API methods and register events.
  });
}
</code></pre>
<p>API Object contains features, like <code>api.core</code>, <code>api.data</code>, <code>api.rows</code> or <code>api.columns</code>.</p>
<p>Each feature has attached methods, like <code>api.data.load(data)</code> or <code>api.core.getDateByPosition(position)</code>.</p>
<p>On each feature, <code>on</code> object is used to register listeners, and <code>raise</code> object to fire events manually.</p>
<pre><code>// Listen an event called 'eventName' of a feature called 'featureName'.
api.featureName.on.eventName($scope, function(data) {
    // Called when 'eventName' is raised.
});

// Raise an event called 'eventName' of a feature called 'featureName'.
api.featureName.raise.eventName(data);

// Call method called 'methodName' of a feature called 'featureName'.
api.featureName.methodName();
</code></pre>
<h2 id="events">Events</h2>
<h4 id="core">core</h4>
<ul>
<li>
<p><strong>api.core.on.ready(api)</strong></p>
<p>Gantt is initialized and ready to load data.</p>
</li>
<li>
<p><strong>api.core.on.rendered(api)</strong></p>
<p>Gantt is fully rendered in browser.</p>
</li>
</ul>
<h4 id="data">data</h4>
<ul>
<li>
<p><strong>api.data.on.change(newData, oldData)</strong></p>
<p>Data has changed.</p>
</li>
<li>
<p><strong>api.data.on.load(data)</strong></p>
<p><em>DEPRECATED - Use <code>change</code> event instead</em></p>
<p>Data has been loaded.</p>
</li>
<li>
<p><strong>api.data.on.remove(data)</strong></p>
<p><em>DEPRECATED - Use <code>change</code> event instead</em></p>
<p>Data has been removed.</p>
</li>
<li>
<p><strong>api.data.on.clear()</strong></p>
<p><em>DEPRECATED - Use <code>change</code> event instead</em></p>
<p>Data has been cleared.</p>
</li>
</ul>
<h4 id="directives">directives</h4>
<p>Directives events are entry points to build <a href="../customize#template-hooks">Template Hooks</a> and <a href="../write_plugin">Plugins</a>.</p>
<ul>
<li>
<p><strong>api.directives.on.new(directiveName, scope, iElement, iAttrs, controller)</strong></p>
<p>A directive instance controller will be created. It can be used to register
<a href="../customize#dom-event-listener">DOM Event Listener</a> (<code>click</code>, <code>dblclick</code>, ...) on any directive.</p>
</li>
<li>
<p><strong>api.directives.on.controller(directiveName, scope, iElement, iAttrs, controller)</strong></p>
<p>A directive instance is in controller phase.</p>
</li>
<li>
<p><strong>api.directives.on.preLink(directiveName, scope, iElement, iAttrs, controller)</strong></p>
<p>A directive instance is in preLink phase.</p>
</li>
<li>
<p><strong>api.directives.on.postLink(directiveName, scope, iElement, iAttrs, controller)</strong></p>
<p>A directive instance is in postLink phase.</p>
</li>
<li>
<p><strong>api.directives.on.destroy(directiveName, scope, iElement, iAttrs, controller)</strong></p>
<p>A directive instance scope has been destroyed.</p>
</li>
</ul>
<h4 id="tasks">tasks</h4>
<ul>
<li>
<p><strong>api.tasks.on.add(task)</strong>, <strong>api.tasks.on.change(task)</strong>, <strong>api.tasks.on.remove(task)</strong></p>
<p>A task has been added, changed or removed</p>
</li>
<li>
<p><strong>api.tasks.on.viewChange(task)</strong></p>
<p>A task view has been changed and displayed.</p>
</li>
<li>
<p><strong>api.tasks.on.rowChange(task, oldRow)</strong>, <strong>api.tasks.on.beforeRowChange(task, newRow)</strong></p>
<p>A task has been (or will be) moved from one row to another.</p>
</li>
<li>
<p><strong>api.tasks.on.viewRowChange(task, oldRow)</strong>, <strong>api.tasks.on.beforeViewRowChange(task, newRow)</strong></p>
<p>A task view has been (or will be) moved from one row to another.</p>
</li>
<li>
<p><strong>api.tasks.on.displayed(tasks, filteredTasks, visibleTasks)</strong></p>
<p>Tasks have been displayed.</p>
</li>
<li>
<p><strong>api.tasks.on.filter(tasks, filteredTasks, visibleTasks)</strong></p>
<p>Tasks have been filtered out.</p>
</li>
<li>
<p><strong>api.tasks.on.clean(taskModel)</strong></p>
<p>Model of a task has been cleaned and will be loaded.</p>
</li>
</ul>
<h4 id="timespans">timespans</h4>
<ul>
<li>
<p><strong>api.timespans.on.add(timespan)</strong>, <strong>api.timespans.on.change(timespan)</strong>, <strong>api.timespans.on.remove(timespan)</strong></p>
<p>A timespan has been added, changed or removed.</p>
</li>
<li>
<p><strong>api.timespans.on.clean(timespanModel)</strong></p>
<p>Model of a timespans has been cleaned and will be loaded.</p>
</li>
</ul>
<h4 id="rows">rows</h4>
<ul>
<li>
<p><strong>api.rows.on.add(row)</strong>, <strong>api.rows.on.change(row)</strong>, <strong>api.rows.on.remove(row)</strong></p>
<p>A row has been added, changed or removed.</p>
</li>
<li>
<p><strong>api.rows.on.move(row, oldIndex, newIndex)</strong></p>
<p>A row has been moved.</p>
</li>
<li>
<p><strong>api.rows.on.displayed(rows, filteredRows, visibleRows)</strong></p>
<p>Rows have been displayed.</p>
</li>
<li>
<p><strong>api.rows.on.filter(rows, filteredRows)</strong></p>
<p>Rows have been filtered out.</p>
</li>
<li>
<p><strong>api.rows.on.clean(row)</strong></p>
<p>Model of a row has been cleaned and will be loaded.</p>
</li>
</ul>
<h4 id="columns">columns</h4>
<ul>
<li>
<p><strong>api.columns.on.generate(columns, headers)</strong></p>
<p>Columns have been generated.</p>
</li>
<li>
<p><strong>api.columns.on.clear()</strong></p>
<p>Columns have been cleared.</p>
</li>
</ul>
<h4 id="side">side</h4>
<ul>
<li>
<p><strong>api.side.on.resizeBegin(width)</strong>, <strong>api.side.on.resize(width)</strong>, <strong>api.side.on.resizeEnd(width)</strong></p>
<p>Side area is starting to resize, resizing or has stopped resizing.</p>
</li>
</ul>
<h4 id="scroll">scroll</h4>
<ul>
<li>
<p><strong>api.scroll.on.scroll(left, date, direction)</strong></p>
<p>The user scrolls to the left or right side of the chart. Use this event to load more data on the fly.</p>
</li>
</ul>
<h2 id="methods">Methods</h2>
<h4 id="core_1">core</h4>
<ul>
<li>
<p><strong>api.core.getDateByPosition(position)</strong></p>
<p>Retrieves the date from position in gantt.</p>
</li>
<li>
<p><strong>api.core.getPositionByDate(date)</strong></p>
<p>Retrieves the position in gantt from date.</p>
</li>
</ul>
<h4 id="data_1">data</h4>
<ul>
<li>
<p><strong>api.data.load(data)</strong></p>
<p><em>DEPRECATED - Use <code>data</code> attribute instead</em></p>
<p>Loads more data to the Gantt.</p>
<p>See <a href="../data">Data</a> for more information.</p>
</li>
<li>
<p><strong>api.data.remove(data)</strong></p>
<p><em>DEPRECATED - Use <code>data</code> attribute instead</em></p>
<p>Removes data from the Gantt.</p>
<p>It is possible to remove complete rows or specific tasks</p>
</li>
<li>
<p><strong>api.data.clear()</strong></p>
<p><em>DEPRECATED - Use <code>data</code> attribute instead</em></p>
<p>Removes all rows and tasks at once.</p>
</li>
<li>
<p><strong>api.data.get()</strong></p>
<p>Get the data model bound to the gantt.</p>
</li>
</ul>
<h4 id="timespans_1">timespans</h4>
<ul>
<li>
<p><strong>api.timespans.load(timespans)</strong></p>
<p>Loads timespans to the Gantt.</p>
<p>See <a href="../timespans">Timespans</a> for more information.</p>
</li>
<li>
<p><strong>api.timespans.remove(timespans)</strong></p>
<p>Removes timespans from the Gantt.</p>
</li>
<li>
<p><strong>api.timespans.clear()</strong></p>
<p>Removes all timespans at once.</p>
</li>
</ul>
<h4 id="columns_1">columns</h4>
<ul>
<li>
<p><strong>api.columns.clear()</strong></p>
<p>Removes all columns.</p>
</li>
<li>
<p><strong>api.columns.generate()</strong></p>
<p>Generates all columns and display them.</p>
</li>
<li>
<p><strong>api.columns.getColumnsWidth()</strong></p>
<p>Get the actual width of the columns.</p>
</li>
<li>
<p><strong>api.columns.getColumnsWidthToFit()</strong></p>
<p>Get the width of the columns that would fit the gantt available width.</p>
</li>
<li>
<p><strong>api.columns.getDateRange(visibleOnly)</strong></p>
<p>Get the column date range. If <code>visibleOnly=true</code> then only the current visible range will be returned.
Returns an array of two dates <code>[dateOfFirstColumn, endDateOfLastColumn]</code> or <code>undefined</code> if there are no columns.</p>
</li>
<li>
<p><strong>api.columns.refresh()</strong></p>
<p>Refresh columns and current date. It will also apply filters, and may be required if you use 
<a href="../attributes#filter-task-filter-task-comparator">filter-task</a> or <a href="../attributes##filter-row-filter-row-comparator">filter-row</a> with a function.</p>
</li>
</ul>
<h4 id="side_1">side</h4>
<ul>
<li>
<p><strong>api.side.setWidth(width)</strong></p>
<p>Set side area width. If given <code>width</code> is <code>undefined</code>, it will be computed automatically based on content.</p>
<p>Calling this function after setting or updating gantt data may lead to unexpected results. Wrap the call in 
<code>$timeout</code> function if the computed width doesn't seem to use the new data to compute the width.</p>
</li>
<li>
<p><strong>api.side.getWidth()</strong></p>
<p>Get side area width.</p>
</li>
</ul>
<h4 id="rows_1">rows</h4>
<ul>
<li>
<p><strong>api.rows.sort()</strong></p>
<p>Sort rows based on <code>sort-mode</code> value.</p>
</li>
<li>
<p><strong>api.rows.applySort()</strong></p>
<p>Apply the actual sort provided by <code>sort-mode</code> to gantt model data.</p>
</li>
<li>
<p><strong>api.rows.refresh()</strong></p>
<p>Refresh rows. It will also apply filters, and may be required if you use <a href="../attributes#filter-task-filter-task-comparator">filter-task</a> or
<a href="../attributes##filter-row-filter-row-comparator">filter-row</a> with a function.</p>
</li>
<li>
<p><strong>api.rows.addRowSorter(sorter)</strong>, <strong>api.rows.removeRowSorter(sorter)</strong></p>
<p>Register a function that will be called to customize sorting of rows.</p>
<pre><code>sorter = function(rows) {
  return rows.reverse();
}

api.rows.addRowSorter(sorter);

$scope.$on('$destroy', function() {
  api.rows.removeRowSorter(sorter);
};
</code></pre>
</li>
<li>
<p><strong>api.rows.addRowFilter(filter)</strong>, <strong>api.rows.removeRowFilter(filter)</strong></p>
<p>Register a function that will be called to customize filtering of rows.</p>
<pre><code>filter = function(rows) {
  rows.pop();
  return rows;
}

api.rows.addRowFilter(filter);

$scope.$on('$destroy', function() {
  api.rows.removeRowFilter(filter);
};
</code></pre>
</li>
<li>
<p><strong>api.rows.setFilterImpl(func)</strong></p>
<p>Register a function to use for filtering.</p>
<p>The default filtering function is based on AngularJS <a href="https://docs.angularjs.org/api/ng/filter/filter">$filter('filter')</a>.</p>
<pre><code>function(sortedRows, filterRow, filterRowComparator) {
  return $filter('filter')(sortedRows, filterRow, filterRowComparator);
};
</code></pre>
</li>
</ul>
<h4 id="timeframes">timeframes</h4>
<ul>
<li>
<p><strong>api.timeframes.registerTimeFrames(timeframes)</strong></p>
<p>Register an array of TimeFrame objects.</p>
</li>
<li>
<p><strong>api.timeframes.clearTimeframes()</strong></p>
<p>Removes all registered TimeFrame objects.</p>
</li>
<li>
<p><strong>api.timeframes.registerDateFrames(timeframes)</strong></p>
<p>Register an array of DateFrame objects.</p>
</li>
<li>
<p><strong>api.timeframes.clearDateFrames()</strong></p>
<p>Removes all registered DateFrame objects.</p>
</li>
<li>
<p><strong>api.timeframes.registerTimeFrameMappings(timeframes)</strong></p>
<p>Register an array of TimeFrameMapping objects.</p>
</li>
<li>
<p><strong>api.timeframes.clearTimeFrameMappings()</strong></p>
<p>Removes all registered TimeFrameMapping objects.</p>
</li>
</ul>
<h4 id="scroll_1">scroll</h4>
<ul>
<li>
<p><strong>api.scroll.to(position)</strong></p>
<p>Scrolls to position.</p>
</li>
<li>
<p><strong>api.scroll.toDate(date)</strong></p>
<p>Scrolls to date.</p>
</li>
<li>
<p><strong>api.scroll.left(offset)</strong></p>
<p>Moves scroll to left by offset.</p>
</li>
<li>
<p><strong>api.scroll.right(offset)</strong></p>
<p>Moves scroll to right by offset.</p>
</li>
</ul>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../../js/bootstrap-3.0.3.min.js"></script>
        <script src="../../js/prettify-1.0.min.js"></script>
        <script src="../../js/base.js"></script>
        <script src="../../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>docs/configuration/customize/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/configuration/customize/">
        <link rel="shortcut icon" href="../../img/favicon.ico">

        <title>Customize - angular-gantt</title>

        <link href="../../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../../css/prettify-1.0.css" rel="stylesheet">
        <link href="../../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="../..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../plugins">Plugins</a>
                        </li>
                    
                        <li class="active">
                            <a href=".">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../api">API</a>
                        </li>
                    
                        <li >
                            <a href="../write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../../plugins/labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../../contribute">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../../faq">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../plugins">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../api">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#customize">Customize</a></li>
        
            <li><a href="#default-template">Default Template</a></li>
        
            <li><a href="#custom-template">Custom Template</a></li>
        
            <li><a href="#template-hooks">Template Hooks</a></li>
        
            <li><a href="#examples">Examples</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="customize">Customize</h1>
<p>angular-gantt is highly customizable, using either <a href="#custom-template">Custom Template</a> or <a href="#template-hooks">Template Hooks</a>.</p>
<p>It uses a template located in <code>src/template/gantt.tmpl.html</code>. This template is
compiled when <code>gantt</code> directive is found in your application. It contains custom <code>gantt-*</code> directives that represents
each object type you can find in the component.</p>
<h2 id="default-template">Default Template</h2>
<p>The default template located in <code>src/template/gantt.tmpl.html</code> use many <code>gantt-*</code> directives that
gives a readable structure to the component. </p>
<p>Lets review the major directives that compose this template.</p>
<ul>
<li>
<p><strong>gantt-labels</strong> Left area of the component, containing rows labels and upper-left corner.</p>
</li>
<li>
<p><strong>gantt-header</strong> Top area of the components, with all columns headers.</p>
</li>
<li>
<p><strong>gantt-body</strong> Main area of the component, contains rows and columns, labels and headers excluded.</p>
</li>
<li>
<p><strong>gantt-body-background</strong> Background of <code>gantt-body</code>. It contains background of rows.</p>
</li>
<li>
<p><strong>gantt-row-background</strong> Background of a row.</p>
</li>
<li>
<p><strong>gantt-body-foreground</strong> Foreground of <code>gantt-body</code>. It contains the current date line.</p>
</li>
<li>
<p><strong>gantt-body-columns</strong> Container for all columns.</p>
</li>
<li>
<p><strong>gantt-column</strong> Column. It can contain timeFrames.</p>
</li>
<li>
<p><strong>gantt-time-frame</strong> TimeFrame.</p>
</li>
<li>
<p><strong>gantt-body-rows</strong> Container of all rows.</p>
</li>
<li>
<p><strong>gantt-timespan</strong> Timespan.</p>
</li>
<li>
<p><strong>gantt-row</strong> Row.</p>
</li>
<li>
<p><strong>gantt-task</strong> Task.</p>
</li>
</ul>
<h2 id="custom-template">Custom Template</h2>
<p>You can use a custom template by copying the default template to your application and define <code>templateUrl</code>
attribute to the URL of this copy.</p>
<p>This is the easiest method to customize angular-gantt, but keep in mind you will have to update your custom template
when upgrading to a new version.</p>
<h2 id="template-hooks">Template Hooks</h2>
<p>Template Hooks can be registered on any template directive.</p>
<p>It allows to fully customize angular-gantt without having to change the default template, making upgrade process of
easier than with a custom template.</p>
<p>Hooks can be installed using <a href="../api#directives">api.directives.on.new</a> event and uninstalled
using <a href="../api#directives">api.directives.on.destroy</a> event. Those events are raised when any template <code>gantt-*</code>
directive is added/removed from the DOM by AngularJS. They are entry points for <a href="../write_plugin">writing a Plugin</a>.</p>
<pre><code>&lt;div gantt api=registerApi&gt;&lt;/div&gt;
</code></pre>
<!-- -->

<pre><code>$scope.registerApi = function(api) {

  api.directives.on.new($scope, function(dName, dScope, dElement, dAttrs, dController) {
    if (dName === 'xxxxxx') { // 'xxxxxx' is the 'gantt*' directive name in camelCase.
      // Use dScope, dElement, dAttrs and dController to do what you want.
    }
  });

}
</code></pre>
<h2 id="examples">Examples</h2>
<h3 id="dom-event-listener">DOM Event Listener</h3>
<p>Any DOM Event Listener (<code>click</code>, <code>dblclick</code>, ...) can be added on any <code>gantt-*</code> directive.</p>
<pre><code>api.directives.on.new($scope, function(dName, dScope, dElement, dAttrs, dController) {
  if (dName === 'ganttTask') {
    dElement.bind('click', function(event) {
        $log.info('task-click: ' + dScope.task.model);
    });
  }
});
</code></pre>
<h3 id="plugins">Plugins</h3>
<p>Standard plugins are good examples of what can be done using <a href="#template-hooks">Template Hooks</a> and the <a href="../api">API</a>. </p>
<p>See sources located in <code>src/plugins</code>.</p>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../../js/bootstrap-3.0.3.min.js"></script>
        <script src="../../js/prettify-1.0.min.js"></script>
        <script src="../../js/base.js"></script>
        <script src="../../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>docs/contribute/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/contribute/">
        <link rel="shortcut icon" href="../img/favicon.ico">

        <title>Contribute - angular-gantt</title>

        <link href="../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../css/prettify-1.0.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../configuration/data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/api">API</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../plugins/labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../sources">Sources</a>
                </li>
            
            
            
                <li class="active">
                    <a href=".">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../faq">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../sources">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../faq">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#contribute">Contribute</a></li>
        
            <li><a href="#issues-guidelines">Issues Guidelines</a></li>
        
            <li><a href="#coding-rules">Coding Rules</a></li>
        
            <li><a href="#branching-guidelines">Branching Guidelines</a></li>
        
            <li><a href="#pull-request-guidelines">Pull Request Guidelines</a></li>
        
            <li><a href="#git-commit-guidelines">Git Commit Guidelines</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="contribute">Contribute</h1>
<p>We'd love for you to contribute to our source code and to make angular-gantt better !</p>
<p>Source code is available on <a href="https://github.com/angular-gantt/angular-gantt">GitHub</a> under the
<a href="../about#Free-Software">MIT License</a>. You may also read <a href="../sources#build">Sources</a> section to learn how to build
angular-gantt from sources.</p>
<p>Here are the guidelines we'd like you to follow:</p>
<h2 id="issues-guidelines">Issues Guidelines</h2>
<p>Before you submit your issue search the archive, maybe your question was already answered.</p>
<p>If you didn't found anything related in the archive, you can create a new issue providing:</p>
<ul>
<li>AngularJS version</li>
<li>angular-gantt version</li>
<li>Browser(s) used</li>
<li>Long description of the issue</li>
<li>Data used to reproduce, as JSON or javascript.</li>
<li>Possible workaround</li>
</ul>
<h2 id="coding-rules">Coding Rules</h2>
<ul>
<li>Please configure your editor with formatting rules defined in <code>.editorconfig</code> file. You may find an 
<a href="http://editorconfig.org/#download">EditorConfig</a> plugin to automatically configure those settings.</li>
<li>Try to follow convention used in existing sources.</li>
<li>Use <a href="http://usejsdoc.org/">JSDoc</a> to comment your code.</li>
</ul>
<h2 id="branching-guidelines">Branching Guidelines</h2>
<ul>
<li>Master branch: <code>master</code> is the main development branch. Each stable public version is tagged using this branch.</li>
<li>Release branches: <code>MAJOR.MINOR.x</code> are release branches. They contains minor changes and bugfixes after release of first
major version. Only the latest release branch, and it won't contains new features from master branch and next releases.</li>
<li>Feature branches: They contains code for a features or a bugfix which needs several commits, and will be merged when
 it is tested and ready.</li>
</ul>
<h2 id="pull-request-guidelines">Pull Request Guidelines</h2>
<ul>
<li>Create and use a branch with a meaning full name, based on the <code>master</code> branch for a new feature, or latest
 <code>MAJOR.MINOR.x</code> branch for a bugfix.</li>
<li>Your pull request must contain only one feature or bugfix.</li>
<li>Run <code>grunt watch --force</code> to build <code>angular-gantt.js</code> on the fly during development.</li>
<li>Modify source files located in <code>src/</code>.</li>
<li>Files under <code>dist/</code> are generated by the build.</li>
<li>Keep only minimal changes for the feature or the fix.</li>
<li>For a new feature, write a test by adding of modifying test files located in <code>test/**</code>.</li>
<li>Run tests with <code>grunt test</code>, and ensure all tests are passing.</li>
<li>Update the demo application, and run it by running <code>grunt serve</code> from <code>demo</code> folder.</li>
<li>Update <code>README.md</code> if required.</li>
<li>Build demo by running <code>grunt</code> from <code>demo</code> folder</li>
<li>Create a Pull Request for your feature branch.</li>
</ul>
<h2 id="git-commit-guidelines">Git Commit Guidelines</h2>
<p>This commit guidelines is inspired by <a href="https://github.com/angular/angular.js">angularJS</a> project.</p>
<p>We have very precise rules over how our git commit messages can be formatted.  This leads to <strong>more
readable messages</strong> that are easy to follow when looking through the <strong>project history</strong>.  But also,
we use the git commit messages to <strong>generate the AngularJS change log</strong>.</p>
<h3 id="commit-message-format">Commit Message Format</h3>
<p>Each commit message consists of a <strong>header</strong>, a <strong>body</strong> and a <strong>footer</strong>.  The header has a special
format that includes a <strong>type</strong>, a <strong>scope</strong> and a <strong>subject</strong>:</p>
<pre><code>&lt;type&gt;(&lt;scope&gt;): &lt;subject&gt;
&lt;BLANK LINE&gt;
&lt;body&gt;
&lt;BLANK LINE&gt;
&lt;footer&gt;
</code></pre>
<p>Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
to read on github as well as in various git tools.</p>
<h3 id="type">Type</h3>
<p>Must be one of the following:</p>
<ul>
<li><strong>feat</strong>: A new feature</li>
<li><strong>fix</strong>: A bug fix</li>
<li><strong>docs</strong>: Documentation only changes</li>
<li><strong>style</strong>: Changes that do not affect the meaning of the code (white-space, formatting, missing
  semi-colons, etc)</li>
<li><strong>refactor</strong>: A code change that neither fixes a bug or adds a feature</li>
<li><strong>perf</strong>: A code change that improves performance</li>
<li><strong>test</strong>: Adding missing tests</li>
<li><strong>chore</strong>: Changes to the build process or auxiliary tools and libraries such as documentation
  generation</li>
</ul>
<h3 id="scope">Scope</h3>
<p>The scope could be anything specifying place of the commit change. For example <code>row</code>,
<code>task</code>, <code>header</code>, <code>options</code>, <code>css</code>, <code>readme</code>, etc...</p>
<h3 id="subject">Subject</h3>
<p>The subject contains succinct description of the change:</p>
<ul>
<li>use the imperative, present tense: "change" not "changed" nor "changes"</li>
<li>don't capitalize first letter</li>
<li>no dot (.) at the end</li>
</ul>
<h3 id="body">Body</h3>
<p>Just as in the <strong>subject</strong>, use the imperative, present tense: "change" not "changed" nor "changes"
The body should include the motivation for the change and contrast this with previous behavior.</p>
<h3 id="footer">Footer</h3>
<p>The footer should contain any information about <strong>Breaking Changes</strong> and is also the place to
reference GitHub issues that this commit <strong>Closes</strong>.</p>
<p>A detailed explanation can be found in this <a href="https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#">document</a>.</p>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../js/bootstrap-3.0.3.min.js"></script>
        <script src="../js/prettify-1.0.min.js"></script>
        <script src="../js/base.js"></script>
        <script src="../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>src/plugins/corner/corner.css<|end_filename|>
.gantt-corner-area {
    position: absolute;
    width: 100%;
    overflow: hidden;
}

.gantt-corner-area .gantt-header-row {
    padding-top: 1px;
    border-top: none;
}

.gantt-corner-area .gantt-header-row {
    position: relative;
}

.gantt-corner-area .gantt-header-row .gantt-column-header {
    position: absolute;
    right: 0;
    padding-left: 5px;
    padding-right: 5px;
}


<|start_filename|>docs/faq/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/faq/">
        <link rel="shortcut icon" href="../img/favicon.ico">

        <title>FAQ - angular-gantt</title>

        <link href="../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../css/prettify-1.0.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../configuration/data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/api">API</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../plugins/labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../contribute">Contribute</a>
                </li>
            
            
            
                <li class="active">
                    <a href=".">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../contribute">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../about">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#frequently-asked-questions">Frequently Asked Questions</a></li>
        
            <li><a href="#is-jquery-required">Is JQuery required ?</a></li>
        
            <li><a href="#can-i-use-angular-gantt-without-angularjs">Can i use angular-gantt without angularJS ?</a></li>
        
            <li><a href="#what-are-the-dependencies">What are the dependencies ?</a></li>
        
            <li><a href="#which-browser-is-supported">Which browser is supported ?</a></li>
        
            <li><a href="#i-have-an-issue-with-date-calendar-andor-timezone">I have an issue with date, calendar and/or timezone ?</a></li>
        
            <li><a href="#how-can-i-set-first-day-of-week-and-first-week-of-year">How can i set first day of week and first week of year ?</a></li>
        
            <li><a href="#is-it-possible-to-print-the-gantt">Is it possible to print the gantt ?</a></li>
        
            <li><a href="#how-can-i-get-better-performance">How can I get better performance ?</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="frequently-asked-questions">Frequently Asked Questions</h1>
<ul>
<li>
<h3 id="is-jquery-required">Is JQuery required ?</h3>
<p>No.</p>
</li>
<li>
<h3 id="can-i-use-angular-gantt-without-angularjs">Can i use angular-gantt without angularJS ?</h3>
<p>No.</p>
</li>
<li>
<h3 id="what-are-the-dependencies">What are the dependencies ?</h3>
<ul>
<li><a href="https://angularjs.org">AngularJS</a> &gt;= 1.3</li>
<li><a href="https://github.com/urish/angular-moment">angular-moment</a> (<a href="http://momentjs.com/">momentJS</a> wrapper)</li>
</ul>
<p>Plugins may require additional dependencies:</p>
<ul>
<li><a href="https://github.com/ganarajpr/angular-dragdrop">angular-native-dragdrop</a> &gt;= 1.1.0 (<a href="../plugins/sortable">Sortable</a>)</li>
<li><a href="https://github.com/angular-ui-tree/angular-ui-tree">angular-ui-tree</a> (<a href="../plugins/tree">Tree</a>)</li>
<li><a href="https://github.com/marcj/css-element-queries">css-element-queries</a> (<a href="../plugins/resizeSensor">ResizeSensor</a>)</li>
<li><a href="https://github.com/jsplumb/jsplumb/">jsPlumb</a> &gt;= 2.2.0 (<a href="../plugins/dependencies">Dependencies</a>)</li>
</ul>
</li>
<li>
<h3 id="which-browser-is-supported">Which browser is supported ?</h3>
<p>Any up-to-date HTML5 browser should work properly.</p>
</li>
<li>
<h3 id="i-have-an-issue-with-date-calendar-andor-timezone">I have an issue with date, calendar and/or timezone ?</h3>
<p>angular-gantt use <a href="https://github.com/urish/angular-moment">angular-moment</a>, an angularJS wrapper for <a href="http://momentjs.com/">momentJS</a>. 
For any features related to date, like date formats, week numbering, custom calendars and timezone support, please
review those projects documentations.</p>
</li>
<li>
<h3 id="how-can-i-set-first-day-of-week-and-first-week-of-year">How can i set first day of week and first week of year ?</h3>
<p>Using <a href="http://momentjs.com/">momentJS</a> API.</p>
<pre><code>moment.locale('en', {
  week : {
    dow : 1, // Monday is the first day of the week.
    doy : 4 // The week that contains Jan 4th is the first week of the year.
  }
});
</code></pre>
</li>
<li>
<h3 id="is-it-possible-to-print-the-gantt">Is it possible to print the gantt ?</h3>
<p>One way to print the gantt is to use a headless browser like <a href="http://www.phantomjs.org">PhantomJS</a>. We prepared a 
sample rasterize script file which can be used to print the gantt either as pdf or image.</p>
<p>Usage: The sample script contains a small how-to. 
Download: <a href="https://github.com/angular-gantt/angular-gantt/blob/master/printing/phantomjs/rasterize.js">printing/phantomjs/rasterize.js</a></p>
</li>
<li>
<h3 id="how-can-i-get-better-performance">How can I get better performance ?</h3>
<p>Make sure that only the absolutely necessary data is loaded into the Gantt. This can be done by loading data for a limited time period (e.g. 6 months) and using the scroll events to load more tasks when the user is scrolling to the end of the active date range.
Additionally different view modes like the <code>view-scale='year'</code> or the column width setting <code>column-width=undefined</code> do display a big amount of data at the same time. If this is not necessary then switching to a lower view scale or disabling the automatic column width calculation is recommended.</p>
<p>When running in production we recommend to disable the Angular debug mode and to enable DI strict mode for an additional performance optimization. More about this can be found in the official AngularJS <a href="https://code.angularjs.org/1.3.14/docs/guide/production">documentation</a>.</p>
</li>
</ul>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../js/bootstrap-3.0.3.min.js"></script>
        <script src="../js/prettify-1.0.min.js"></script>
        <script src="../js/base.js"></script>
        <script src="../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>src/plugins/dependencies/dependencies.css<|end_filename|>
.gantt .gantt-body-dependencies {
    position: absolute;
    height: 100%;
    width: 100%;
}

.gantt .gantt-endpoint.jtk-endpoint-anchor {
    z-index: 20; /* z-index must be higher than tasks z-index */
    overflow: hidden;
}

.gantt .gantt-endpoint.fallback-endpoint.jtk-endpoint-anchor {
    z-index: auto;
    overflow: hidden;
}

.gantt .gantt-endpoint-overlay.fallback-endpoint {
    height: 4px;
    width: 40px;
    top: -2px;
}

.gantt .gantt-endpoint-overlay.start-endpoint.fallback-endpoint {
    left: -45px;
    background-image:-webkit-linear-gradient(left, rgba(255,255,255,0), #456);
    background-image:linear-gradient(to right, rgba(255,255,255,0), #456);
}

.gantt .gantt-endpoint-overlay.end-endpoint.fallback-endpoint {
    left: -5px;
    background-image:-webkit-linear-gradient(right, rgba(255,255,255,0), #456);
    background-image:linear-gradient(to left, rgba(255,255,255,0), #456);
}

.gantt .jtk-overlay {
    z-index: 20;
}

.gantt .gantt-endpoint-overlay {
    position: absolute;
}

.gantt .gantt-endpoint-overlay.arrow-right {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid black;
}

.gantt .gantt-endpoint-overlay.arrow-right.start-endpoint {
    top: -5px;
    left: -11px;
    border-left-color: rgb(64, 64, 160); /* blue */
}

.gantt .gantt-endpoint-overlay.arrow-right.end-endpoint {
    top: -5px;
    left: 6px;
    border-left-color: rgb(64, 160, 64); /* green */
}

.gantt .gantt-endpoint.source-endpoint svg * {
    fill: rgb(64, 160, 64); /* green */
}

.gantt .gantt-endpoint.target-endpoint svg * {
    fill: rgb(64, 64, 160); /* blue */
}

.gantt-task-conflict {
    border: 2px solid #a00000;
}


<|start_filename|>src/plugins/sections/sections.css<|end_filename|>
.gantt-task-foreground-sections {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
}

.gantt-task-sections {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    bottom: 0;
}

.gantt-task-sections .gantt-task-section {
    position: absolute;
    overflow: hidden;
    height: 100%;
}


<|start_filename|>docs/plugins/corner/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/plugins/corner/">
        <link rel="shortcut icon" href="../../img/favicon.ico">

        <title>Corner - angular-gantt</title>

        <link href="../../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../../css/prettify-1.0.css" rel="stylesheet">
        <link href="../../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="../..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../../configuration/data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/api">API</a>
                        </li>
                    
                        <li >
                            <a href="../../configuration/write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../tree">Tree</a>
                        </li>
                    
                        <li class="active">
                            <a href=".">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../../contribute">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../../faq">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../tree">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../groups">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#corner">Corner</a></li>
        
            <li><a href="#usage">Usage</a></li>
        
            <li><a href="#attributes">Attributes</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="corner">Corner</h1>
<p>Display labels for column headers in the corner</p>
<h2 id="usage">Usage</h2>
<pre><code>angular.module('myApp', ['gantt', 'gantt.corner']);
</code></pre>
<!-- -->

<pre><code>&lt;div gantt&gt;
    &lt;gantt-corner enabled="..." headers-labels="..."&gt;&lt;/gantt-corner&gt;
&lt;/div&gt;
</code></pre>
<!-- -->

<pre><code>&lt;link rel="stylesheet" href="angular-gantt-corner.css"&gt;
</code></pre>
<h2 id="attributes">Attributes</h2>
<ul>
<li>
<h3 id="enabled">enabled</h3>
<p>Enable corner display.</p>
<p>default: <code>true</code></p>
</li>
<li>
<h3 id="headers-labels">headers-labels</h3>
<p>Associative object of headers labels. Key is the header, and value is the label.</p>
<pre><code>$scope.headersLabels = { 
  year: 'Year', 
  quarter: 'Quarter', 
  month: 'Month', 
  week: 'Week', 
  day: 'Day', 
  hour: 'Hour', 
  minute:'Minute'
};
</code></pre>
<p>It is also possible to specify a function to return the header label.</p>
<pre><code>$scope.headersLabels = function(headerName, headerUnit, columns) {
    // Capitalize the header name to build the label.
    return headerName.charAt(0).toUpperCase() + headerName.slice(1);
}
</code></pre>
</li>
<li>
<h3 id="headers-labels-templates">headers-labels-templates</h3>
<p>The template to use to display a single header label.</p>
<p>default: <code>{{getLabel(header)}}</code></p>
<p>Can also be an associative object, where Key is the header, and value is the template.</p>
<pre><code>$scope.headersLabels = { 
  year: '&lt;i&gt;{{getLabel(header)}}&lt;/i&gt;', 
  month: '&lt;b&gt;{{getLabel(header)}}&lt;/b&gt;', 
};
</code></pre>
<p>It is also possible to specify a function to return the header label template.</p>
<pre><code>$scope.headersLabelsTemplates = function(headerName, headerUnit, columns) {
    if (headerName == 'year') {
        return '&lt;i&gt;{{getLabel(header)}}&lt;/i&gt;';
    } else if (headerName == 'month') {
        return '&lt;b&gt;{{getLabel(header)}}&lt;/b&gt;';
    }
    // Other case will default template.
}
</code></pre>
</li>
</ul>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../../js/bootstrap-3.0.3.min.js"></script>
        <script src="../../js/prettify-1.0.min.js"></script>
        <script src="../../js/base.js"></script>
        <script src="../../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>docs/configuration/attributes/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/configuration/attributes/">
        <link rel="shortcut icon" href="../../img/favicon.ico">

        <title>Attributes - angular-gantt</title>

        <link href="../../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../../css/prettify-1.0.css" rel="stylesheet">
        <link href="../../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="../..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../timespans">Timespans</a>
                        </li>
                    
                        <li class="active">
                            <a href=".">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../api">API</a>
                        </li>
                    
                        <li >
                            <a href="../write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../../plugins/labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../../plugins/resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../../contribute">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../../faq">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../timespans">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../plugins">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#attributes">Attributes</a></li>
        
            <li><a href="#api">api</a></li>
        
            <li><a href="#auto-expand">auto-expand</a></li>
        
            <li><a href="#allow-side-resizing">allow-side-resizing</a></li>
        
            <li><a href="#current-date">current-date</a></li>
        
            <li><a href="#current-date-value">current-date-value</a></li>
        
            <li><a href="#column-width">column-width</a></li>
        
            <li><a href="#expand-to-fit-shrink-to-fit">expand-to-fit, shrink-to-fit</a></li>
        
            <li><a href="#column-magnet">column-magnet</a></li>
        
            <li><a href="#shift-column-magnet">shift-column-magnet</a></li>
        
            <li><a href="#time-frames-magnet">time-frames-magnet</a></li>
        
            <li><a href="#daily">daily</a></li>
        
            <li><a href="#data">data</a></li>
        
            <li><a href="#filter-task-filter-task-comparator">filter-task, filter-task-comparator</a></li>
        
            <li><a href="#filter-row-filter-row-comparator">filter-row, filter-row-comparator</a></li>
        
            <li><a href="#from-date">from-date</a></li>
        
            <li><a href="#to-date">to-date</a></li>
        
            <li><a href="#headers">headers</a></li>
        
            <li><a href="#headers-formats">headers-formats</a></li>
        
            <li><a href="#headers-scales">headers-scales</a></li>
        
            <li><a href="#time-frames-date-frames">time-frames, date-frames</a></li>
        
            <li><a href="#time-frames-working-mode">time-frames-working-mode</a></li>
        
            <li><a href="#time-frames-non-working-mode">time-frames-non-working-mode</a></li>
        
            <li><a href="#timespans">timespans</a></li>
        
            <li><a href="#max-height">max-height</a></li>
        
            <li><a href="#options">options</a></li>
        
            <li><a href="#show-side">show-side</a></li>
        
            <li><a href="#side-width">side-width</a></li>
        
            <li><a href="#sort-mode">sort-mode</a></li>
        
            <li><a href="#row-content">row-content</a></li>
        
            <li><a href="#task-out-of-range">task-out-of-range</a></li>
        
            <li><a href="#task-content">task-content</a></li>
        
            <li><a href="#template">template</a></li>
        
            <li><a href="#template-url">template-url</a></li>
        
            <li><a href="#view-scale">view-scale</a></li>
        
            <li><a href="#tasklimitthreshold">taskLimitThreshold</a></li>
        
            <li><a href="#columnlimitthreshold">columnLimitThreshold</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="attributes">Attributes</h1>
<p><code>gantt</code> directive can be configured using attributes. Each attribute is interpreted as 
<a href="https://docs.angularjs.org/guide/expression">AngularJS Expression</a>.</p>
<ul>
<li>
<h3 id="api">api</h3>
<p>Registers an API Object to call methods of the component and listen or raise events.</p>
<p>See <a href="#api">API</a> for more details.</p>
<pre><code>&lt;div gantt api="registerApi"&gt;&lt;/div&gt;
</code></pre>
<!-- -->

<pre><code>$scope.registerApi = function(api) {
  api.core.on.ready() {
    // Call API methods and register events.
  }
}
</code></pre>
</li>
<li>
<h3 id="auto-expand">auto-expand</h3>
<p>Define if the date range will be extended when the user scroll to the left or right edge.</p>
<ul>
<li><code>both</code></li>
<li><code>left</code></li>
<li><code>right</code></li>
<li><code>none</code></li>
</ul>
</li>
<li>
<h3 id="allow-side-resizing">allow-side-resizing</h3>
<p>Side section can be resized.</p>
<p>default: <code>true</code></p>
</li>
<li>
<h3 id="current-date">current-date</h3>
<p>How current date is displayed.</p>
<ul>
<li><code>none</code></li>
<li><code>line</code></li>
<li><code>column</code></li>
</ul>
<p>default: <code>line</code></p>
</li>
<li>
<h3 id="current-date-value">current-date-value</h3>
<p>Current date in the chart.</p>
<pre><code>&lt;div gantt current-date="getToday"&gt;&lt;/div&gt;
</code></pre>
<!-- -->

<pre><code>$scope.getToday = new Date();
</code></pre>
<p>default: <code>new Date()</code></p>
</li>
<li>
<h3 id="column-width">column-width</h3>
<p>The width of each column in <code>px</code>. This allows you add logic like <code>column-width="viewScale == 'day' ?  50 : 20"</code> to 
have wider columns for days than for other column scales.</p>
<p>If <code>undefined</code>, gantt will always fit available width.</p>
</li>
<li>
<h3 id="expand-to-fit-shrink-to-fit">expand-to-fit, shrink-to-fit</h3>
<p>Ensure that gantt is expanded/shrinked to fit the available width, even if <code>column-width</code> value is defined.</p>
</li>
<li>
<h3 id="column-magnet">column-magnet</h3>
<p>Precision of the column. All date and time computation will be rounded using this precision. It will also snap
to borders of timeFrames and columns is <code>time-frames-magnet</code> is <code>true</code>.</p>
<p>Format is <code>&lt;integer&gt; &lt;momentjs-unit&gt;</code>. See <a href="http://momentjs.com/docs/#/manipulating/add/">momentJS#add()</a> for 
a list of supported unit.</p>
<p>If <code>column-magnet</code> value is greater than <code>view-scale</code> or defined to <code>column</code> value, it will apply magnets to 
column borders. You can't defined a <code>column-magnet</code> value that covers multiple columns.</p>
<p>Examples:</p>
<ul>
<li><code>column</code></li>
<li><code>1 minute</code></li>
<li><code>30 minutes</code></li>
<li><code>1 hour</code></li>
<li><code>3 hours</code></li>
</ul>
<p>default: <code>15 minutes</code></p>
</li>
<li>
<h3 id="shift-column-magnet">shift-column-magnet</h3>
<p>Precision of the column when holding down SHIFT key.</p>
<p>If undefined, it will use 0.25 viewScale.</p>
</li>
<li>
<h3 id="time-frames-magnet">time-frames-magnet</h3>
<p>Make timeFrame borders snap. Columns magnet must be enabled too.</p>
<p>default: <code>true</code></p>
</li>
<li>
<h3 id="daily">daily</h3>
<p>Fill up view of tasks by rounding their <code>from</code>/<code>to</code> date to the start/end of day.</p>
</li>
<li>
<h3 id="data">data</h3>
<p>The <a href="../data">data</a> model for the gantt chart. </p>
<p>See <a href="../data">Data</a> for more information.</p>
</li>
<li>
<h3 id="filter-task-filter-task-comparator">filter-task, filter-task-comparator</h3>
<p>Expression to filter on visible tasks using angularJS <code>$filter('filter')</code>.</p>
<p>Value of <code>filter-task</code> is <code>expression</code> (<code>string</code>|<code>Object</code>|<code>function(value, index)</code>)),
and <code>filter-task-comparator</code> is <code>comparator</code> (<code>function(actual, expected)</code>|<code>boolean</code>|<code>undefined</code>)
as defined in <a href="https://docs.angularjs.org/api/ng/filter/filter">angularJS filter filter</a>.</p>
<p>When using a function, call <a href="#api-rows-refresh">api.rows.refresh()</a> to refresh filtering when required.</p>
</li>
<li>
<h3 id="filter-row-filter-row-comparator">filter-row, filter-row-comparator</h3>
<p>Expression to filter on visible rows using angularJS <code>$filter('filter')</code>.</p>
<p>Value of <code>filter-row</code> is <code>expression</code> (<code>string</code>|<code>Object</code>|<code>function(value, index)</code>)), 
and <code>filter-row-comparator</code> is <code>comparator</code> (<code>function(actual, expected)</code>|<code>boolean</code>|<code>undefined</code>)
as defined in  <a href="https://docs.angularjs.org/api/ng/filter/filter">angularJS filter filter</a>).</p>
<p>When using a function, call <a href="#api-rows-refresh">api.rows.refresh()</a> to refresh filtering when required.</p>
</li>
<li>
<h3 id="from-date">from-date</h3>
<p>Ensures that the chart rendering starts at this date. This is useful for showing the chart even without any tasks, or 
empty time before the first task, or truncate previous tasks.</p>
</li>
<li>
<h3 id="to-date">to-date</h3>
<p>Ensures that the chart rendering goes at least to this date. This is useful for showing the chart even without any 
tasks, or empty time after the last task, or truncate next tasks.</p>
</li>
<li>
<h3 id="headers">headers</h3>
<p>Array of headers to display.</p>
<ul>
<li><code>millisecond</code></li>
<li><code>second</code></li>
<li><code>minute</code></li>
<li><code>hour</code></li>
<li><code>day</code></li>
<li><code>week</code></li>
<li><code>month</code></li>
<li><code>quarter</code></li>
<li><code>year</code></li>
</ul>
<!-- -->

<pre><code>&lt;div gantt headers="['month', 'week', 'day']"&gt;&lt;/div&gt;
</code></pre>
</li>
<li>
<h3 id="headers-formats">headers-formats</h3>
<p>Associative object of headers format. Key is the header, and value is the format.</p>
<p>See <a href="http://momentjs.com/docs/#/displaying/format/">momentJS#format()</a></p>
<pre><code>&lt;div gantt headers-formats="headersFormats"&gt;&lt;/div&gt;
</code></pre>
<!-- -->

<pre><code>$scope.headersFormats = { 
  'year': 'YYYY', 
  'quarter': '[Q]Q YYYY', 
  month: 'MMMM YYYY', 
  week: 'w', 
  day: 'D', 
  hour: 'H', 
  minute:'H:mm',
  second:'H:mm:ss',
  millisecond:'H:mm:ss:SSS'
};
</code></pre>
<p>It is also possible to specify a function to format the header label.</p>
<pre><code>$scope.headersFormats = { 
  week: function(column) {
    return column.date.format('Do [-]') + column.endDate.format('Do') + column.date.format(' [(W]w[)]');
  }
};
</code></pre>
</li>
<li>
<h3 id="headers-scales">headers-scales</h3>
<p>Associative object of headers view scales, indicating which scale each header should use. Key is the header, and value is the view scale.</p>
<p>Scale can be any <a href="http://momentjs.com/docs/#/manipulating/add/">momentJS#add()</a> supported unit.</p>
<pre><code>&lt;div gantt headers="['dayLetter', 'day']" headers-formats="{dayLetter: 'dd'}" headers-scales="{dayLetter: 'day'}"&gt;&lt;/div&gt;
</code></pre>
<!-- -->

<pre><code>$scope.headersScales = {
  dayLetter: 'day'
};
</code></pre>
</li>
<li>
<h3 id="time-frames-date-frames">time-frames, date-frames</h3>
<p>TimeFrames and DateFrames are used to configure global calendar in the gantt.</p>
<p>A TimeFrame is a part of day, for example 8H00-20H00 or 12H00-13H30. Each TimeFrame can be marked as working or not.
A TimeFrame can also be marked as default to be used for every day displayed in the gantt.</p>
<p>A DateFrame is a configuration object that will reference one or many TimeFrame names for specific days in the
calendar. Using DateFrame configurations, it's possible to setup holidays, weekends and other special days that will
have different time schedules than usual.</p>
<pre><code>&lt;div gantt time-frames="timeFrames" date-frames="dateFrames"&gt;&lt;/div&gt;
</code></pre>
<!-- -->

<pre><code>$scope.timeFrames = {
                    day: {
                        start: moment('8:00', 'HH:mm'),
                            end: moment('20:00', 'HH:mm'),
                            working: true, // This is a working period
                            default: true // It will be used for each day
                        },
                    noon: {
                        start: moment('12:00', 'HH:mm'),
                        end: moment('13:30', 'HH:mm'),
                        magnet: false, // This will disable magnet snapping
                        working: false, // This is a resting period
                        default: true // It will be used for each day
                    },
                    closed: {
                        magnet: false, // This will disable magnet snapping
                        working: false // We don't work when it's closed
                    }
};

$scope.dateFrames = {
                    halloween:{
                        date: moment('2014-10-31', 'YYYY-MM-DD'), // A specific date
                        targets: ['day'] // Use timeFrame named day for halloween. We won't close for noon.
                    },
                    holidays: {
                         start: moment('2014-08-15', 'YYYY-MM-DD'), // A date range
                         end: moment('2014-08-30', 'YYYY-MM-DD'),
                         targets: ['closed'] // use timeFrame named closed for this date range.
                    }, 
                    weekend: {
                         evaluator: function(date) { // A custom function evaluated for each day in the gantt
                             return date.isoWeekday() === 6 || date.isoWeekday() === 7;
                         },
                         targets: ['closed'] // Use timeFrame named closed for saturday and sunday.
                    }
};
</code></pre>
<p>In this example, three TimeFrames (<code>day</code>, <code>noon</code>, <code>closed</code>) and three DateFrames (<code>halloween</code>, <code>holidays</code>, <code>weekend</code>) 
are defined.</p>
<p>If a day match at least one DateFrame, it will apply TimeFrames defined in <code>targets</code> property of each matching
DateFrame. If no DateFrame at all match the day, it will use <code>default</code> TimeFrames (<code>day</code> and <code>noon</code>).</p>
<p>When multiple TimeFrames are found for a day, smaller ones have priority and bigger ones will be split or shrinked.</p>
<p>After resolution of TimeFrame for each day, TimeFrame can be displayed or cropped from the gantt using
<code>time-frames-working-mode</code> and <code>time-frames-non-working-mode</code>.</p>
<p>You can also add <code>color</code> and <code>classes</code> properties on TimeFrame object to define custom style on displayed timeFrames.</p>
<pre><code>closed: {
     working: false // We don't work when it's closed
     color: 'green' // Display in green because green is a nice color :)
     classes: ['gantt-closed-timeframe'] // Give one or many class names to customize using CSS.       
 }
</code></pre>
</li>
<li>
<h3 id="time-frames-working-mode">time-frames-working-mode</h3>
<p>How working TimeFrames are displayed.</p>
<ul>
<li><code>visible</code></li>
<li><code>hidden</code></li>
<li><code>cropped</code></li>
</ul>
<p>default: <code>hidden</code></p>
</li>
<li>
<h3 id="time-frames-non-working-mode">time-frames-non-working-mode</h3>
<p>How non-working TimeFrames are displayed.</p>
<ul>
<li><code>visible</code></li>
<li><code>hidden</code></li>
<li><code>cropped</code></li>
</ul>
<p>default: <code>visible</code></p>
</li>
<li>
<h3 id="timespans">timespans</h3>
<p>The <a href="../timespans">timespans</a> model for the gantt chart. </p>
<p>See <a href="../timespans">Timespans</a> for more information.</p>
</li>
<li>
<h3 id="max-height">max-height</h3>
<p>Maximum height of the Gantt. It will show a vertical scroll bar if the content does not fit inside.</p>
</li>
<li>
<h3 id="options">options</h3>
<p>Configure the gantt using as a plain old javascript object, keys of <code>options</code> representing the configuration
attributes. camelCased version of attributes must be used as key (<code>autoExpand</code> instead of <code>auto-expand</code>).</p>
<pre><code>&lt;div gantt options="options"&gt;&lt;/div&gt;
</code></pre>
<!-- -->

<pre><code>$scope.options = {
  data: [...],
  api: function(api) {
    ...
  },
  ...
}
</code></pre>
</li>
<li>
<h3 id="show-side">show-side</h3>
<p>Show the side section. Make sure that a side section plugin (e.g. <a href="../../plugins/tree">Tree</a> or <a href="../../plugins/table">Table</a>) 
is activated otherwise the side section is not shown.</p>
<p>default: <code>true</code></p>
</li>
<li>
<h3 id="side-width">side-width</h3>
<p>Width of the side section. You can also set side <code>width</code>, <code>min-width</code> and <code>max-width</code> using 
<code>.gantt-side</code> CSS selector.</p>
</li>
<li>
<h3 id="sort-mode">sort-mode</h3>
<p>Sorts the rows by given expression.</p>
<ul>
<li><code>model.name</code>: Sort by row name</li>
<li><code>from</code>: Sort by the earliest task from date of each row</li>
<li><code>to</code>: Sort by the latest task to date of each row</li>
<li><code>&lt;expression&gt;</code>: Sort using an angularJS expression (see <a href="https://docs.angularjs.org/api/ng/filter/orderBy">angularJS orderBy filter</a>).</li>
</ul>
<p>Prepend a <code>-</code> in front to sort descending. E.g. <code>-from</code></p>
</li>
<li>
<h3 id="row-content">row-content</h3>
<p>Content used to display each row. It can contain HTML and will be automatically compiled and linked against Row
object scope. Main user scope is available with <code>scope</code>.</p>
<p>It can be modified for a specific row using <a href="../data">Row model</a> <code>content</code> property</p>
<p>default: <code>{{row.model.name}}</code></p>
<p>example: <code>&lt;i class="fa fa-align-justify" ng-click="scope.handleRowIconClick(row.model)"&gt;&lt;/i&gt; {{row.model.name}}</code></p>
</li>
<li>
<h3 id="task-out-of-range">task-out-of-range</h3>
<p>Behavior when tasks are defined out of the Gantt rendering range (see <code>from-date</code> and <code>to-date</code>).</p>
<ul>
<li><code>expand</code>: rendering range will be expanded to display the tasks entirely.</li>
<li><code>truncate</code>: tasks will be truncated, or even totally hidden if they are not in rendering range at all.</li>
</ul>
<p>default: <code>expand</code></p>
</li>
<li>
<h3 id="task-content">task-content</h3>
<p>Content used to display each task. It can contain HTML and will be automatically compiled and linked against Task
object scope. Main user scope is available with <code>scope</code>.</p>
<p>It can be modified for a specific task using <a href="../data">Task model</a> <code>content</code> property</p>
<p>default: <code>{{task.model.name}}</code></p>
<p>example: <code>&lt;i class="fa fa-cog" ng-click="scope.handleTaskIconClick(task.model)"&gt;&lt;/i&gt; {{task.model.name}}</code></p>
</li>
<li>
<h3 id="template">template</h3>
<p>Custom Gantt HTML template. If you want to customize the default Gantt HTML template, copy the content of
template file <code>src/template/gantt.tmpl.html</code> to a variable and set this parameter. </p>
<p>Compared to <code>template-url</code>, this will avoid an additional request to load the template from an URL.</p>
<p>This attribute is not observed and not evaluated as an expression.</p>
</li>
<li>
<h3 id="template-url">template-url</h3>
<p>URL of custom Gantt HTML template. If you want to customize the default Gantt HTML template, make a copy of default
template file <code>src/template/gantt.tmpl.html</code> to your own project, and set the URL of copied file to this
attribute. </p>
<p>If <code>undefined</code> or <code>template/gantt.tmpl.html</code>, default template will be used.   </p>
<p>This attribute is not observed and not evaluated as an expression.</p>
<p><em>note: template-url must be different than <code>template/gantt.tmpl.html</code>, or it will use default
template included in <code>angular-gantt.js</code>.</em></p>
</li>
<li>
<h3 id="view-scale">view-scale</h3>
<p>Column scale using any of <a href="http://momentjs.com/docs/#/manipulating/add/">momentJS#add()</a> supported unit.</p>
<ul>
<li><code>second</code></li>
<li><code>minute</code></li>
<li><code>hour</code></li>
<li><code>day</code></li>
<li><code>week</code></li>
<li><code>month</code></li>
<li><code>quarter</code></li>
<li><code>year</code></li>
</ul>
<p>An optional number value can be prepended to this scale, like <code>5 minutes</code>, <code>3 hours</code> or <code>6 months</code>.</p>
<p>default: <code>day</code></p>
</li>
<li>
<h3 id="tasklimitthreshold">taskLimitThreshold</h3>
<p>The threshold tasks count for <code>ganttTaskLimiter</code>.</p>
<p>For performance reasons, when more than 100 tasks are loaded in the gantt chart, tasks outside of the visible 
scrollable viewport are removed from the DOM by the <code>ganttTaskLimiter</code> filter .</p>
<p>It enhance global performance when <code>ganttTaskLimiter</code> is enabled on a heavy-loaded data model, but tasks may appear 
with a small delay when scrolling the viewport.</p>
<p>Set to a negative number like <code>-1</code> to disable it, or set to <code>null</code> to force it regardless the tasks count.</p>
<p>default: <code>100</code></p>
</li>
<li>
<h3 id="columnlimitthreshold">columnLimitThreshold</h3>
<p>The threshold columns count for <code>ganttColumnLimiter</code>.</p>
<p>For performance reasons, when more than 500 columns are loaded in the gantt chart, columns outside of the visible 
scrollable viewport are removed from the DOM by the <code>ganttColumnLimiter</code> filter.</p>
<p>It enhance global performance when <code>ganttColumnLimiter</code> is enabled on a heavy-loaded data model, but columns may 
appear with a small delay when scrolling the viewport.</p>
<p>Set to a negative number like <code>-1</code> to disable it, or set to <code>null</code> to force it regardless the columns count.</p>
<p>default: <code>500</code></p>
</li>
</ul>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../../js/bootstrap-3.0.3.min.js"></script>
        <script src="../../js/prettify-1.0.min.js"></script>
        <script src="../../js/base.js"></script>
        <script src="../../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>build/banner.js<|end_filename|>
var pkg = require('../package.json');

module.exports = `Project: ${pkg.name} v${pkg.version} - ${pkg.description}
Authors: ${pkg.author}, ${pkg.contributors}
License: ${pkg.license}
Homepage: ${pkg.homepage}
Github: ${pkg.repository.url}`;


<|start_filename|>tslint.json<|end_filename|>
{
    "extends": "tslint-config-standard",
    "rules": {
      "member-ordering": false,
      "no-inferrable-types": true,
      "prefer-for-of": true
    }
}


<|start_filename|>docs/get-started/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/get-started/">
        <link rel="shortcut icon" href="../img/favicon.ico">

        <title>Get Started - angular-gantt</title>

        <link href="../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../css/prettify-1.0.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li class="active">
                    <a href=".">Get Started</a>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../configuration/data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/api">API</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../plugins/labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../contribute">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../faq">FAQ</a>
                </li>
            
            
            
                <li >
                    <a href="../about">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="..">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li >
                    <a rel="prev" href="../configuration/data">
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#get-started">Get Started</a></li>
        
            <li><a href="#install-automatically">Install Automatically</a></li>
        
            <li><a href="#install-using-cdns">Install using CDNs</a></li>
        
            <li><a href="#install-manually">Install Manually</a></li>
        
            <li><a href="#usage">Usage</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h1 id="get-started">Get Started</h1>
<h2 id="install-automatically">Install Automatically</h2>
<ul>
<li>
<p>This requires <a href="https://www.npmjs.com/">npm</a>, <a href="https://yarnpkg.com/">yarn</a> or <a href="https://bower.io/">bower</a></p>
</li>
<li>
<p>Download and install <code>angular-gantt</code> using one of the supported package manager.</p>
<p><a href="https://github.com/angular-gantt/angular-gantt/releases/latest">Latest released version</a> is the recommended and stable version.</p>
<pre><code>yarn add angular-gantt --save
</code></pre>
<p><a href="https://github.com/angular-gantt/angular-gantt/tree/master">Master branch version</a> contains bleeding edge features, but may be very unstable.</p>
<pre><code>yarn add angular-gantt#master --save
</code></pre>
</li>
</ul>
<h2 id="install-using-cdns">Install using CDNs</h2>
<ol>
<li>
<p>You can find released version on CDNs.</p>
<p><a href="http://www.jsdelivr.com/">jsDelivr</a></p>
<pre><code>//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css
</code></pre>
<p><a href="http://www.cdnjs.com/">CDNjs</a> (Replace <code>&lt;version&gt;</code> with latest github tag)</p>
<pre><code>//cdnjs.cloudflare.com/ajax/libs/angular-gantt/&lt;version&gt;/angular-gantt.min.css
</code></pre>
</li>
<li>
<p>Add <code>angular-gantt.min.js</code> and <code>angular-gantt.min.css</code> URLs to your HTML code.</p>
<pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" href="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.css"/&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;script src="//cdn.jsdelivr.net/angular.gantt/latest/angular-gantt.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
</li>
</ol>
<h2 id="install-manually">Install Manually</h2>
<ol>
<li>
<p>Install <a href="../faq#what-are-the-dependencies">dependencies</a> in your application.</p>
</li>
<li>
<p>Download angular-gantt or use CDNs.
    <a href="https://github.com/angular-gantt/angular-gantt/releases/latest">Latest released version</a> is available to 
    <a href="https://github.com/angular-gantt/angular-gantt/releases/latest">download</a> on Github and is the recommended and stable version.</p>
<p><a href="https://github.com/angular-gantt/angular-gantt/tree/master">Master branch version</a> contains bleeding edge features, but may be very unstable.</p>
</li>
<li>
<p>Copy <code>angular-gantt.js</code> and <code>angular-gantt.css</code> located in <code>dist</code> directory to your application source folder.</p>
</li>
<li>
<p>Add <code>angular-gantt.js</code> and <code>angular-gantt.css</code> files to your HTML code.</p>
<pre><code>&lt;head&gt;
  &lt;link rel="stylesheet" href="dist/angular-gantt.css"/&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;script src="../dist/angular-gantt.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
</li>
</ol>
<h2 id="usage">Usage</h2>
<ol>
<li>
<p>Register <code>gantt</code> in your application dependencies.</p>
<pre><code>var myApp = angular.module('myApp', ['gantt']);
</code></pre>
</li>
<li>
<p>Put <code>gantt</code> directive into your HTML code at the position you would like to show the Gantt chart.</p>
<pre><code>&lt;div gantt data=data&gt;&lt;/div&gt;
</code></pre>
</li>
<li>
<p>Define data variable in your scope to start using gantt through two-way binding.</p>
<pre><code>$scope.data = [
    {name: 'row1', tasks: [
        {name: 'task1', from: &lt;date&gt;, to: &lt;date&gt;},
        {name: 'task2', from: &lt;date&gt;, to: &lt;date&gt;}
        ]
    },
    {name: 'row2', tasks: [
        {name: 'task3', from: &lt;date&gt;, to: &lt;date&gt;},
        {name: 'task4', from: &lt;date&gt;, to: &lt;date&gt;}
      ]
    },
  ...
]
</code></pre>
</li>
<li>
<p>[Optional] You can load <a href="../configuration/plugins">plugins</a> like 
  <a href="../plugins/table">table</a> to display row names on left side, 
  <a href="../plugins/movable">movable</a> to make tasks movable and resizable with mouse and touch events, and 
  <a href="../plugins/tooltips">tooltips</a> to enable tooltips on mouse over.</p>
<pre><code>var myApp = angular.module('myApp', ['gantt', 'gantt.table', 'gantt.movable', 'gantt.tooltips']);
</code></pre>
<!-- -->

<pre><code>&lt;div gantt data=data&gt;
  &lt;gantt-table&gt;&lt;/gantt-table&gt;
  &lt;gantt-movable&gt;&lt;/gantt-movable&gt;
  &lt;gantt-tooltips&gt;&lt;/gantt-tooltips&gt;
&lt;/div&gt;
</code></pre>
</li>
<li>
<p>For a sample app see the files in <code>demo</code> or <a href="http://plnkr.co/XYYkD8tf5b2LQs5kL5nx">Plunker</a>.</p>
</li>
</ol>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../js/bootstrap-3.0.3.min.js"></script>
        <script src="../js/prettify-1.0.min.js"></script>
        <script src="../js/base.js"></script>
        <script src="../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>docs/about/index.html<|end_filename|>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
        <link rel="canonical" href="https://www.angular-gantt.com/about/">
        <link rel="shortcut icon" href="../img/favicon.ico">

        <title>About - angular-gantt</title>

        <link href="../css/bootstrap-custom.min.css" rel="stylesheet">
        <link href="../css/font-awesome-4.0.3.css" rel="stylesheet">
        <link href="../css/prettify-1.0.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

        <!-- Collapsed navigation -->
        <div class="navbar-header">
            <!-- Expander button -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Main title -->
            <a class="navbar-brand" href="..">angular-gantt</a>
        </div>

        <!-- Expanded navigation -->
        <div class="navbar-collapse collapse">
            <!-- Main navigation -->
            <ul class="nav navbar-nav">
            
            
                <li >
                    <a href="../get-started">Get Started</a>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Configuration <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../configuration/data">Data</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/timespans">Timespans</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/attributes">Attributes</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/plugins">Plugins</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/customize">Customize</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/api">API</a>
                        </li>
                    
                        <li >
                            <a href="../configuration/write_plugin">Write a Plugin</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plugins <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    
                        <li >
                            <a href="../plugins/labels">Labels</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/table">Table</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tree">Tree</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/corner">Corner</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/groups">Groups</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/dependencies">Dependencies</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sortable">Sortable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/movable">Movable</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/drawtask">Draw Task</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/tooltips">Tooltips</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/bounds">Bounds</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/sections">Sections</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/progress">Progress</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/overlap">Overlap</a>
                        </li>
                    
                        <li >
                            <a href="../plugins/resizeSensor">Resize Sensor</a>
                        </li>
                    
                    </ul>
                </li>
            
            
            
                <li >
                    <a href="../sources">Sources</a>
                </li>
            
            
            
                <li >
                    <a href="../contribute">Contribute</a>
                </li>
            
            
            
                <li >
                    <a href="../faq">FAQ</a>
                </li>
            
            
            
                <li class="active">
                    <a href=".">About</a>
                </li>
            
            
            </ul>

            <!-- Search, Navigation and Repo links -->
            <ul class="nav navbar-nav navbar-right">
                
                <li >
                    <a rel="next" href="../faq">
                        <i class="fa fa-arrow-left"></i> Previous
                    </a>
                </li>
                <li class="disabled">
                    <a rel="prev" >
                        Next <i class="fa fa-arrow-right"></i>
                    </a>
                </li>
                
                <li>
                    <a href="https://github.com/angular-gantt/angular-gantt">
                        
                            <i class="fa fa-github"></i>
                        
                        GitHub
                    </a>
                </li>
                
            </ul>
        </div>
    </div>
</div>

        <div class="container">
            <div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary">
    <ul class="nav bs-sidenav">
    
        <li class="main active"><a href="#free-software">Free Software</a></li>
        
    
        <li class="main "><a href="#the-mit-license-mit">The MIT License (MIT)</a></li>
        
    
    </ul>
</div></div>
            <div class="col-md-9" role="main">

<h2 id="free-software">Free Software</h2>
<p>angular-gantt is Free Software authored by <a href="https://github.com/Schweigi"><NAME></a> and <a href="https://twitter.com/Toilal"><NAME></a>.</p>
<p>It is available under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.</p>
<blockquote>
<p>The MIT License is a free software license originating at the Massachusetts Institute of Technology (MIT).
It is a permissive free software license, meaning that it permits reuse within proprietary software provided all copies
of the licensed software include a copy of the MIT License terms and the copyright notice. Such proprietary software
retains its proprietary nature even though it incorporates software under the MIT License.
The license is also GPL-compatible, meaning that the GPL permits combination and redistribution with software that uses
the MIT License.</p>
<p>-- <cite>Wikipedia</cite></p>
</blockquote>
<h2 id="the-mit-license-mit">The MIT License (MIT)</h2>
<p>Copyright (c) 2015 <NAME>, <NAME></p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.</p>
</div>
        </div>

        

        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="../js/bootstrap-3.0.3.min.js"></script>
        <script src="../js/prettify-1.0.min.js"></script>
        <script src="../js/base.js"></script>
        <script src="../skeletons/plugin.js"></script>
    </body>
</html>

<|start_filename|>src/plugins/sortable/sortable.css<|end_filename|>
.gantt-row-label.on-dragging {
    background-color: #999999 !important;
}

.gantt-row-label.on-drag-hover {
    border: 1px solid #999999;
}


<|start_filename|>src/plugins/tree/tree.css<|end_filename|>
.gantt-row-label-background {
    position: absolute;
    width: 100%;
}

.gantt-tree-body .gantt-row-label span {
    margin: 0;
}

.gantt-tree-body .gantt-row-label a.gantt-tree-handle-button {
    padding: 0;
    position: relative;
}

.gantt-tree-body .gantt-row-label span.gantt-tree-handle {
    padding: 0;
    position: relative;
}

.gantt-tree-body .gantt-row-label span.gantt-label-text {
    padding-left: 0;
}

.gantt-tree-header {
    overflow: hidden;
    position: relative;
}

.gantt-tree-body {
    overflow: hidden;
}

.gantt-tree-header-row {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.gantt-tree-header-row span.gantt-label-text {
    display: inline-block;
    padding-top: 0.5em;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.gantt-tree-body ol {
    padding-left: 0;
}

.angular-ui-tree-handle {
    cursor: inherit;
    text-decoration: inherit;
    font-weight: inherit;
    min-height: inherit;
    line-height: inherit;
}

.gantt-side-content-tree .gantt-tree-handle-button {
    pointer-events: auto;
}


<|start_filename|>build/webpack.dist.conf.js<|end_filename|>
var path = require('path');
var utils = require('./utils');
var webpack = require('webpack');
var config = require('../config');
var merge = require('webpack-merge');
var banner = require('./banner');
var baseWebpackConfig = require('./webpack.base.conf');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');


var env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : config.build.env;

webpackConfig = merge(baseWebpackConfig, {
  entry: {
    'angular-gantt': ['./src/index.ts', './src/plugins/index.ts'],
    'angular-gantt-core': './src/index.ts',
    'angular-gantt-plugins': './src/plugins/index.ts'
  },
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('[name].js'),
    chunkFilename: utils.assetsPath('[id].js')
  },
  externals: {
    'angular': 'angular',
    'moment': 'moment',
    'moment-range': 'moment-range',
    'angular-gantt': 'angular-gantt',
    'angular-animate': 'angular-animate',
    'angular-strap': 'angular-strap',
    'angular-ui-tree': 'ui.tree',
    'angular-native-dragdrop': 'angular-native-dragdrop',
    'bootstrap': 'bootstrap',
    'css-element-queries/src/ElementQueries': 'ElementQueries',
    'css-element-queries/src/ResizeSensor': 'ResizeSensor',
    'font-awesome': 'font-awesome',
    'jsplumb': 'jsPlumb'
  },
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  plugins: [
    new webpack.BannerPlugin({banner:banner, entryOnly: true}),
    new webpack.DefinePlugin({
      'process.env': env
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('[name].css')
    })
  ]
});

webpackMinifiedConfig = merge(webpackConfig, {
  output: {
    filename: utils.assetsPath('[name].min.js'),
    chunkFilename: utils.assetsPath('[id].min.js')
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('[name].min.css')
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    })
  ]
})

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin');

  webpackMinifiedConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  );
}

if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  webpackMinifiedConfig.plugins.push(new BundleAnalyzerPlugin());
}

module.exports = [webpackConfig, webpackMinifiedConfig];


<|start_filename|>src/plugins/overlap/overlap.css<|end_filename|>
.gantt-task-overlaps {
    border: 2px solid #a00000;
}


<|start_filename|>build/postprocess-docs.js<|end_filename|>
var fs = require('fs');
var path = require('path');

var pkg = require('../package.json');

var docsIndex = path.resolve(__dirname, '../docs/index.html');

fs.readFile(docsIndex, 'utf8', function (err, data) {
  if (err) {
    return console.log(err);
  }
  var result = data.replace(/@@version/g, pkg.version);

  fs.writeFile(docsIndex, result, 'utf8', function (err) {
    if (err) return console.log(err);


    fs.readFile(docsIndex, 'utf8', function (err, data) {
      if (err) {
        return console.log(err);
      }
      var header = '<title>Angular Gantt - Gantt chart component for AngularJS</title>\n'+
        '        <meta property="og:title" content="Angular Gantt" />\n'+
        '        <meta property="og:description" content="Gantt chart component for AngularJS" />\n'+
        '        <meta property="og:type" content="website" />\n'+
        '        <meta property="og:url" content="https://www.angular-gantt.com/" />\n'+
        '        <meta property="og:image" content="https://www.angular-gantt.com/img/angular-gantt.png" />'

      var result = data.replace(/<title>.*?<\/title>/g, header);

      fs.writeFile(docsIndex, result, 'utf8', function (err) {
        if (err) return console.log(err);
      });
    });
  });
});

