angular-gantt is highly customizable, using either Custom Template or Template Hooks.

It uses a template located in src/template/gantt.tmpl.html. This template is compiled when gantt directive is found in your application. It contains custom gantt-* directives that represents each object type you can find in the component.

Default Template

The default template located in src/template/gantt.tmpl.html use many gantt-* directives that gives a readable structure to the component.

Lets review the major directives that compose this template.

Custom Template

You can use a custom template by copying the default template to your application and define templateUrl attribute to the URL of this copy.

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.

Template Hooks

Template Hooks can be registered on any template directive.

It allows to fully customize angular-gantt without having to change the default template, making upgrade process of easier than with a custom template.

Hooks can be installed using event and uninstalled using api.directives.on.destroy event. Those events are raised when any template gantt-* directive is added/removed from the DOM by AngularJS. They are entry points for writing a Plugin.

<div gantt api=registerApi></div>
$scope.registerApi = function(api) {$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.



DOM Event Listener

Any DOM Event Listener (click, dblclick, ...) can be added on any gantt-* directive.$scope, function(dName, dScope, dElement, dAttrs, dController) {
  if (dName === 'ganttTask') {
    dElement.bind('click', function(event) {
        $'task-click: ' + dScope.task.model);


Standard plugins are good examples of what can be done using Template Hooks and the API.

See sources located in src/plugins.