default.gantt.tmpl.html

<div class="gantt unselectable" gantt-scroll-manager>
    <gantt-labels>
        <div class="gantt-labels-header">
            <gantt-row-header></gantt-row-header>
        </div>
        <div class="gantt-labels-body"
             ng-style="(maxHeight > 0 && {'max-height': (maxHeight-ganttHeader.offsetHeight)+'px'} || {})"
             ng-show="gantt.columns.length > 0">
            <div gantt-vertical-scroll-receiver style="position: relative">
                <gantt-row-label ng-repeat="row in gantt.rows | filter:{hidden:false} track by row.id">
                    <gantt-sortable swap="swapRows(a,b)" active="allowRowSorting" ng-model="row">
                        <span>{{ row.name }}</span>
                    </gantt-sortable>
                </gantt-row-label>
            </div>
        </div>
    </gantt-labels>
    <gantt-header>
        <gantt-header-columns>
            <div class="gantt-header-row"
                 ng-class="(gantt.headers.month !== undefined && 'gantt-header-row-bottom' || '')"
                 ng-if="gantt.headers.month !== undefined">
                <gantt-column-header ng-repeat="column in gantt.headers.month | filter:{hidden:false}">
                    {{ headerFormatMonth && (column.date | amDateFormat:headerFormatMonth)  || (column.date | amDateFormat:'MMMM YYYY') }}
                </gantt-column-header>
            </div>
            <div class="gantt-header-row" ng-if="gantt.headers.week !== undefined">
                <gantt-column-header ng-repeat="column in gantt.headers.week | filter:{hidden:false}">
                    {{headerFormatWeek && (headerFormatWeek | sprintf:column.week) || column.week }}
                </gantt-column-header>
            </div>
            <div class="gantt-header-row" ng-if="gantt.headers.day !== undefined">
                <gantt-column-header ng-repeat="column in gantt.headers.day | filter:{hidden:false}">
                    {{ headerFormatDay && (column.date | amDateFormat:headerFormatDay) || (viewScale === 'hour' && (column.date | amDateFormat: 'DD dddd') || (column.date | amDateFormat:'DD')) }}
                </gantt-column-header>
            </div>
            <div class="gantt-header-row" ng-if="gantt.headers.hour !== undefined">
                <gantt-column-header ng-repeat="column in gantt.headers.hour | filter:{hidden:false}">
                    {{ headerFormatHour && (column.date | amDateFormat:headerFormatHour) || (column.date | amDateFormat:'HH') }}
                </gantt-column-header>
            </div>
        </gantt-header-columns>
    </gantt-header>
    <gantt-scrollable>
        <gantt-body>
            <div class="gantt-body-background">
                <div class="gantt-row-height"
                     ng-class-odd="'gantt-background-row'"
                     ng-class-even="'gantt-background-row-alt'"
                     ng-repeat="row in gantt.rows | filter:{hidden:false} track by row.id">
                </div>
            </div>
            <div class="gantt-body-foreground">
                <div class="gantt-current-date-line" ng-if="currentDate === 'line'" ng-style="{'left': (gantt.getPositionByDate(moment(currentDateValue))) + 'px' }"></div>
            </div>
            <gantt-body-columns class="gantt-body-columns">
                <gantt-column ng-repeat="column in gantt.columns | filter:{hidden:false}"></gantt-column>
            </gantt-body-columns>
            <gantt-body-rows>
                <div class="gantt-timespan"
                     ng-style="{'left': ((timespan.left-0.3) || timespan.left)+'px', 'width': timespan.width +'px', 'z-index': (timespan.priority || 0)}"
                     ng-class="timespan.classes"
                     ng-repeat="timespan in gantt.timespans">
                    <gantt-tooltip ng-model="timespan" date-format="'MMM d'">
                        <div class="gantt-task-content"><span>{{ timespan.name }}</span></div>
                    </gantt-tooltip>
                </div>
                <gantt-row ng-repeat="row in gantt.rows | filter:{hidden:false} track by row.id">
                    <gantt-task ng-repeat="task in row.tasks | filter:{hidden:false} track by task.id"></gantt-task>
                </gantt-row>
            </gantt-body-rows>
        </gantt-body>
    </gantt-scrollable>


    <!--
    ******* Inline templates *******
    You can specify your own templates by either changing the default ones below or by
    adding an attribute template-url="<url to your template>" on the specific element.
    -->

    <!-- Body template -->
    <script type="text/ng-template" id="template/default.body.tmpl.html">
        <div ng-transclude class="gantt-body"
             ng-style="{'width': gantt.width+'px'}"></div>
    </script>

    <!-- Header template -->
    <script type="text/ng-template" id="template/default.header.tmpl.html">
        <div ng-transclude class="gantt-header"
             ng-show="gantt.columns.length > 0 && gantt.getActiveHeadersCount() > 0"></div>
    </script>

    <!-- Row label template -->
    <script type="text/ng-template" id="template/default.rowLabel.tmpl.html">
        <div ng-transclude class="gantt-labels-row gantt-row-height"
             ng-class-odd="'gantt-background-row'"
             ng-class-even="'gantt-background-row-alt'">
        </div>
    </script>

    <!-- Row header template -->
    <script type="text/ng-template" id="template/default.rowHeader.tmpl.html">
        <div class="gantt-labels-header-row"
             ng-show="gantt.columns.length > 0 && gantt.getActiveHeadersCount() > 0"
             ng-style="{'margin-top': ((gantt.getActiveHeadersCount()-1)*2)+'em'}">
            <span>Name</span>
        </div>
    </script>

    <!-- Labels template -->
    <script type="text/ng-template" id="template/default.labels.tmpl.html">
        <div ng-transclude class="gantt-labels"
             ng-style="(labelsWidth > 0 && {'width': labelsWidth+'px'} || {})"
             gantt-labels-resize="allowLabelsResizing" gantt-labels-resize-width="labelsWidth" gantt-labels-resize-min-width="50"></div>
    </script>

    <!-- Header columns template -->
    <script type="text/ng-template" id="template/default.headerColumns.tmpl.html">
        <div ng-transclude class="gantt-header-columns"
              gantt-horizontal-scroll-receiver></div>
    </script>

    <script type="text/ng-template" id="template/default.columnHeader.tmpl.html">
        <div ng-transclude class="gantt-column-header"
              ng-style="{'width': column.width+'px', 'left': column.left+'px'}"></div>
    </script>

    <!-- Body columns template -->
    <script type="text/ng-template" id="template/default.bodyColumns.tmpl.html">
        <div ng-transclude class="gantt-body-columns"></div>
    </script>

    <script type="text/ng-template" id="template/default.column.tmpl.html">
        <div ng-transclude class="gantt-column"
             ng-class="(viewScale === 'hour' && !column.isWorkHour && 'gantt-foreground-col-nonworkhour' || (column.isWeekend && 'gantt-foreground-col-weekend' || ((column.currentDate && currentDate === 'column') && 'gantt-foreground-col-current-date' || 'gantt-foreground-col')))"
             ng-style="{'width': column.width+'px', 'left': column.left+'px'}"></div>
    </script>

    <!-- Scrollable template -->
    <script type="text/ng-template" id="template/default.scrollable.tmpl.html">
        <div ng-transclude class="gantt-scrollable" gantt-scroll-sender gantt-limit-updater
             ng-style="(maxHeight > 0 && {'max-height': (maxHeight - ganttHeader.offsetHeight)+'px',
        'overflow-y': 'auto', 'overflow-x': (gantt.rows.length == 0 && 'hidden' || 'auto')} ||
        {'overflow-y': 'hidden', 'overflow-x': (gantt.rows.length == 0 && 'hidden' || 'auto')})"></div>
    </script>

    <!-- Rows template -->
    <script type="text/ng-template" id="template/default.bodyRows.tmpl.html">
        <div ng-transclude class="gantt-body-rows"></div>
    </script>

    <!-- Task template -->
    <script type="text/ng-template" id="template/default.task.tmpl.html">
        <div ng-class="(task.isMilestone === true && ['gantt-task-milestone'] || ['gantt-task']).concat(task.classes)"
             ng-style="{'left': ((task.isMilestone === true || task.width === 0) && (task.left-0.3) || task.left)+'px', 'width': task.width +'px', 'z-index': (task.isMoving === true && 1  || task.priority || ''), 'background-color': task.color}">
            <gantt-bounds ng-if="task.bounds !== undefined" ng-model="task"></gantt-bounds>
            <gantt-tooltip ng-if="showTooltips && (task.isMouseOver || task.isMoving)" ng-model="task"></gantt-tooltip>
            <div ng-if="task.truncatedLeft" class="gantt-task-truncated-left"><span>&lt;</span></div>
            <div class="gantt-task-content"><span>{{ (task.isMilestone === true && '&nbsp;' || task.name) }}</span></div>
            <div ng-if="task.truncatedRight" class="gantt-task-truncated-right"><span>&gt;</span></div>
        </div>
    </script>

    <!-- Tooltip template -->
    <script type="text/ng-template" id="template/default.tooltip.tmpl.html">
        <div class="gantt-task-info" ng-style="css">
            <div class="gantt-task-info-content">
                {{ task.name }}</br>
                <small>
                    {{
                    tooltipDateFormat = $parent.tooltipDateFormat && $parent.tooltipDateFormat || 'MMM DD, HH:mm';
                    task.isMilestone === true && (task.from | amDateFormat:tooltipDateFormat) || (task.from | amDateFormat:tooltipDateFormat) + ' - ' + (task.to | amDateFormat:tooltipDateFormat)
                    }}
                </small>
            </div>
        </div>
    </script>

    <!-- Task bounds template -->
    <script type="text/ng-template" id="template/default.bounds.tmpl.html">
        <div ng-show='visible' class='gantt-task-bounds'
             ng-style='getCss()' ng-class='getClass()'></div>
    </script>

    <!-- Row template -->
    <script type="text/ng-template" id="template/default.row.tmpl.html">
        <div ng-transclude class="gantt-row gantt-row-height"></div>
    </script>

</div>