@progress/kendo-angular-gantt 2.0.0-next.202204011501 → 2.0.0-next.202204121507

package/esm2015/template-directives/task-content-template.directive.js

@@ -0,0 +1,45 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents a template that defines the text content section of the task component.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoGanttTaskContentTemplate` directive inside the `<kendo-gantt>` tag.
+ *
+ * The template context is set to the current data item.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-gantt [kendoGanttHierarchyBinding]="data">
+ *            <ng-template kendoGanttTaskContentTemplate let-dataItem>
+ *                {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete
+ *            </ng-template>
+ *        </kendo-gantt>
+ *    `
+ * })
+ * class AppComponent {
+ *    public data: any[] = sampleTasks;
+ * }
+ * ```
+ */
+export class GanttTaskContentTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+GanttTaskContentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTaskContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GanttTaskContentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GanttTaskContentTemplateDirective, selector: "[kendoGanttTaskContentTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTaskContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttTaskContentTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2015/template-directives/task-template.directive.js

@@ -0,0 +1,48 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents a template that defines the whole content of the task component.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoGanttTaskTemplate` directive inside the `<kendo-gantt>` tag.
+ *
+ * The template context is set to the current data item. The following additional field is passed:
+ * - `elementWidth`&mdash;The current task wrapper element's calculated width in pixels based on its start and end date.
+ * Use it as an alias for a template variable by utilizing the `let-elementWidth="elementWidth"` syntax.
+ * Useful for calculations related to rendering custom elements representing the task progress.
+ *
+ * @example
+ * ```ts-preview
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-gantt [kendoGanttHierarchyBinding]="data">
+ *            <ng-template kendoGanttTaskTemplate let-dataItem let-elementWidth="elementWidth">
+ *                {{ dataItem.title }} - {{ dataItem.completionRatio * 100 }}% complete
+ *            </ng-template>
+ *        </kendo-gantt>
+ *    `
+ * })
+ * class AppComponent {
+ *    public data: any[] = sampleTasks;
+ * }
+ * ```
+ */
+export class GanttTaskTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+GanttTaskTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTaskTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GanttTaskTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: GanttTaskTemplateDirective, selector: "[kendoGanttTaskTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTaskTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGanttTaskTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2015/timeline/gantt-timeline.component.js

@@ -0,0 +1,334 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, HostBinding, Input, Output, ViewChild, ViewContainerRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { filter, map, switchMap, take } from 'rxjs/operators';
+import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { isPresent } from '../utils';
+import * as i0 from "@angular/core";
+import * as i1 from "../scrolling/scroll-sync.service";
+import * as i2 from "../dependencies/dependency-dom.service";
+import * as i3 from "../rendering/gantt-header-table-body.component";
+import * as i4 from "../rendering/gantt-tasks-table-body.component";
+import * as i5 from "../scrolling/timeline-scroll.directive";
+import * as i6 from "@progress/kendo-angular-common";
+import * as i7 from "@angular/common";
+import * as i8 from "../dependencies/gantt-dependency.directive";
+/**
+ * @hidden
+ */
+export class GanttTimelineComponent {
+    constructor(scrollSyncService, dependencyDomService, renderer, zone) {
+        this.scrollSyncService = scrollSyncService;
+        this.dependencyDomService = dependencyDomService;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.hostClass = true;
+        this.dependencies = [];
+        // as all drag-and-drop operations are on the timeline container, use a single draggable instance
+        this.timelineContainerPress = new EventEmitter();
+        this.timelineContainerDrag = new EventEmitter();
+        this.timelineContainerRelease = new EventEmitter();
+        this.subscriptions = new Subscription();
+        this.subscriptions.add(
+        // task changes indicates change in row content, number, height, etc.
+        this.dependencyDomService.taskChanges
+            .pipe(filter(args => isPresent(args.timelineRow)), switchMap(args => this.zone.onStable.pipe(take(1), map(() => args))) // ensure the content is rendered
+        )
+            .subscribe(({ timelineRow }) => {
+            const timelineRowHeight = isDocumentAvailable() ? timelineRow.getBoundingClientRect().height : 0;
+            this.renderer.setStyle(this.timelineColumns.nativeElement, 'height', `${(this.rows || []).length * timelineRowHeight}px`);
+        }));
+    }
+    /**
+     * Specifies whether the draggable will attach or detach its pointer event listeners.
+     */
+    get draggableEnabled() {
+        return this.renderDependencyDragClues;
+    }
+    ngAfterViewInit() {
+        const timelineHeader = this.timelineHeaderWrap.nativeElement;
+        const rightContainer = this.timelineContent.nativeElement;
+        this.scrollSyncService.registerElement(rightContainer, 'timeline');
+        this.scrollSyncService.registerElement(timelineHeader, 'header');
+        this.dependencyDomService.registerContentContainer(this.tasksContainer.nativeElement);
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    isNonWorking(item) {
+        return item.hasOwnProperty('isWorking') && !item.isWorking;
+    }
+}
+GanttTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTimelineComponent, deps: [{ token: i1.ScrollSyncService }, { token: i2.DependencyDomService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+GanttTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: { rows: "rows", slots: "slots", groupSlots: "groupSlots", tableWidth: "tableWidth", activeView: "activeView", taskContentTemplate: "taskContentTemplate", taskTemplate: "taskTemplate", summaryTaskTemplate: "summaryTaskTemplate", taskClass: "taskClass", renderDependencyDragClues: "renderDependencyDragClues", dragScrollSettings: "dragScrollSettings", selectable: "selectable", isTaskSelected: "isTaskSelected", isExpanded: "isExpanded", dependencies: "dependencies" }, outputs: { timelineContainerPress: "timelineContainerPress", timelineContainerDrag: "timelineContainerDrag", timelineContainerRelease: "timelineContainerRelease" }, host: { properties: { "class.k-gantt-timeline": "this.hostClass" } }, viewQueries: [{ propertyName: "timelineContent", first: true, predicate: ["timelineContent"], descendants: true, static: true }, { propertyName: "timelineColumns", first: true, predicate: ["timelineColumns"], descendants: true, static: true }, { propertyName: "timelineHeaderWrap", first: true, predicate: ["timelineHeaderWrap"], descendants: true, static: true }, { propertyName: "tasksContainer", first: true, predicate: ["tasksContainer"], descendants: true, static: true }, { propertyName: "dragPopupContainer", first: true, predicate: ["dragPopupContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "dependencyDragCreatePolyline", first: true, predicate: ["dependencyDragCreatePolyline"], descendants: true }], ngImport: i0, template: `
+        <div class="k-timeline k-grid k-widget">
+            <div class="k-grid-header">
+                <div #timelineHeaderWrap class="k-grid-header-wrap">
+                    <table
+                        role="presentation"
+                        [style.width.px]="tableWidth"
+                    >
+                        <tbody
+                            kendoGanttHeaderTableBody
+                            [groupSlots]="groupSlots"
+                            [slots]="slots">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <!-- tabindex="-1" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->
+            <div
+                #timelineContent
+                class="k-grid-content"
+                tabindex="-1"
+                role="tree"
+                aria-roledescription="Timeline"
+                kendoGanttTimelineScrollable
+                [scrollSettings]="dragScrollSettings"
+                kendoDraggable
+                [enableDrag]="draggableEnabled"
+                (kendoPress)="timelineContainerPress.emit($event)"
+                (kendoDrag)="timelineContainerDrag.emit($event)"
+                (kendoRelease)="timelineContainerRelease.emit($event)"
+            >
+                <div class="k-gantt-tables">
+                    <table
+                        class="k-gantt-rows"
+                        [style.width.px]="tableWidth"
+                        role="presentation"
+                    >
+                        <tbody>
+                            <tr *ngFor="let item of rows; let i = index;"
+                                [class.k-alt]="i % 2"
+                            >
+                                <td></td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table
+                        #timelineColumns
+                        class="k-gantt-columns"
+                        role="presentation"
+                        [style.width.px]="tableWidth"
+                    >
+                        <colgroup>
+                            <col *ngFor="let item of slots">
+                        </colgroup>
+
+                        <tbody>
+                            <tr>
+                                <td *ngFor="let item of slots"
+                                    [class.k-nonwork-hour]="isNonWorking(item)"
+                                >
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table
+                        #tasksContainer
+                        class="k-gantt-tasks"
+                        role="presentation"
+                        style="border-collapse: collapse;"
+                        [style.width.px]="tableWidth"
+                    >
+                        <tbody
+                            kendoGanttTasksTableBody
+                            [rows]="rows"
+                            [activeView]="activeView"
+                            [taskContentTemplate]="taskContentTemplate"
+                            [taskTemplate]="taskTemplate"
+                            [summaryTaskTemplate]="summaryTaskTemplate"
+                            [taskClass]="taskClass"
+                            [isExpanded]="isExpanded"
+                            [selectable]="selectable"
+                            [isTaskSelected]="isTaskSelected"
+                            [renderDependencyDragClues]="renderDependencyDragClues"
+                        >
+                        </tbody>
+                    </table>
+                </div>
+                <svg class="k-gantt-dependencies-svg">
+                    <polyline
+                        *ngFor="let dependency of dependencies"
+                        kendoGanttDependency
+                        [dependency]="dependency"
+                    />
+                    <polyline #dependencyDragCreatePolyline />
+                </svg>
+
+                <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->
+                <ng-container #dragPopupContainer></ng-container>
+            </div>
+        </div>
+    `, isInline: true, components: [{ type: i3.GanttHeaderTableBodyComponent, selector: "[kendoGanttHeaderTableBody]", inputs: ["groupSlots", "slots"] }, { type: i4.GanttTasksTableBodyComponent, selector: "[kendoGanttTasksTableBody]", inputs: ["selectable", "rows", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "isExpanded", "isTaskSelected", "renderDependencyDragClues"] }], directives: [{ type: i5.TimelineScrollableDirective, selector: "[kendoGanttTimelineScrollable]", inputs: ["scrollSettings"] }, { type: i6.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.GanttDependencyDirective, selector: "[kendoGanttDependency]", inputs: ["dependency"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GanttTimelineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-gantt-timeline',
+                    template: `
+        <div class="k-timeline k-grid k-widget">
+            <div class="k-grid-header">
+                <div #timelineHeaderWrap class="k-grid-header-wrap">
+                    <table
+                        role="presentation"
+                        [style.width.px]="tableWidth"
+                    >
+                        <tbody
+                            kendoGanttHeaderTableBody
+                            [groupSlots]="groupSlots"
+                            [slots]="slots">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <!-- tabindex="-1" required for https://bugzilla.mozilla.org/show_bug.cgi?id=1069739 -->
+            <div
+                #timelineContent
+                class="k-grid-content"
+                tabindex="-1"
+                role="tree"
+                aria-roledescription="Timeline"
+                kendoGanttTimelineScrollable
+                [scrollSettings]="dragScrollSettings"
+                kendoDraggable
+                [enableDrag]="draggableEnabled"
+                (kendoPress)="timelineContainerPress.emit($event)"
+                (kendoDrag)="timelineContainerDrag.emit($event)"
+                (kendoRelease)="timelineContainerRelease.emit($event)"
+            >
+                <div class="k-gantt-tables">
+                    <table
+                        class="k-gantt-rows"
+                        [style.width.px]="tableWidth"
+                        role="presentation"
+                    >
+                        <tbody>
+                            <tr *ngFor="let item of rows; let i = index;"
+                                [class.k-alt]="i % 2"
+                            >
+                                <td></td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table
+                        #timelineColumns
+                        class="k-gantt-columns"
+                        role="presentation"
+                        [style.width.px]="tableWidth"
+                    >
+                        <colgroup>
+                            <col *ngFor="let item of slots">
+                        </colgroup>
+
+                        <tbody>
+                            <tr>
+                                <td *ngFor="let item of slots"
+                                    [class.k-nonwork-hour]="isNonWorking(item)"
+                                >
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table
+                        #tasksContainer
+                        class="k-gantt-tasks"
+                        role="presentation"
+                        style="border-collapse: collapse;"
+                        [style.width.px]="tableWidth"
+                    >
+                        <tbody
+                            kendoGanttTasksTableBody
+                            [rows]="rows"
+                            [activeView]="activeView"
+                            [taskContentTemplate]="taskContentTemplate"
+                            [taskTemplate]="taskTemplate"
+                            [summaryTaskTemplate]="summaryTaskTemplate"
+                            [taskClass]="taskClass"
+                            [isExpanded]="isExpanded"
+                            [selectable]="selectable"
+                            [isTaskSelected]="isTaskSelected"
+                            [renderDependencyDragClues]="renderDependencyDragClues"
+                        >
+                        </tbody>
+                    </table>
+                </div>
+                <svg class="k-gantt-dependencies-svg">
+                    <polyline
+                        *ngFor="let dependency of dependencies"
+                        kendoGanttDependency
+                        [dependency]="dependency"
+                    />
+                    <polyline #dependencyDragCreatePolyline />
+                </svg>
+
+                <!-- placeholder for the dependency drag popup; its position is not arbitrary - the popup is intended to be absolutely positioned inside the .k-grid-content element -->
+                <ng-container #dragPopupContainer></ng-container>
+            </div>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ScrollSyncService }, { type: i2.DependencyDomService }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { timelineContent: [{
+                type: ViewChild,
+                args: ['timelineContent', { static: true }]
+            }], timelineColumns: [{
+                type: ViewChild,
+                args: ['timelineColumns', { static: true }]
+            }], timelineHeaderWrap: [{
+                type: ViewChild,
+                args: ['timelineHeaderWrap', { static: true }]
+            }], tasksContainer: [{
+                type: ViewChild,
+                args: ['tasksContainer', { static: true }]
+            }], dragPopupContainer: [{
+                type: ViewChild,
+                args: ['dragPopupContainer', { static: false, read: ViewContainerRef }]
+            }], dependencyDragCreatePolyline: [{
+                type: ViewChild,
+                args: ['dependencyDragCreatePolyline', { static: false }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-gantt-timeline']
+            }], rows: [{
+                type: Input
+            }], slots: [{
+                type: Input
+            }], groupSlots: [{
+                type: Input
+            }], tableWidth: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], taskContentTemplate: [{
+                type: Input
+            }], taskTemplate: [{
+                type: Input
+            }], summaryTaskTemplate: [{
+                type: Input
+            }], taskClass: [{
+                type: Input
+            }], renderDependencyDragClues: [{
+                type: Input
+            }], dragScrollSettings: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], isTaskSelected: [{
+                type: Input
+            }], isExpanded: [{
+                type: Input
+            }], dependencies: [{
+                type: Input
+            }], timelineContainerPress: [{
+                type: Output
+            }], timelineContainerDrag: [{
+                type: Output
+            }], timelineContainerRelease: [{
+                type: Output
+            }] } });

package/esm2015/timeline/timeline-base-view.service.js

@@ -0,0 +1,160 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { orderBy } from '@progress/kendo-data-query';
+import { isWorkDay, isWorkHour, lastDayOfWeek } from '../utils';
+import { addDays, firstDayInWeek, getDate, firstDayOfMonth, lastDayOfMonth, addMonths, addWeeks } from '@progress/kendo-date-math';
+/**
+ * @hidden
+ */
+export const DAY_FORMAT = 'E d/MM';
+/**
+ * @hidden
+ */
+export const HOUR_FORMAT = 'HH:mm aa';
+/**
+ * @hidden
+ */
+export const MONTH_FORMAT = 'MMM';
+/**
+ * @hidden
+ */
+export class TimelineBaseViewService {
+    constructor(intlService, mapper) {
+        this.intlService = intlService;
+        this.mapper = mapper;
+        this._viewStart = 0;
+    }
+    get viewStart() {
+        return this._viewStart;
+    }
+    /**
+     *
+     * @param tasks - The tasks which are going to be rendered in the table
+     * @returns {Object} - An object containing the range start and end dates
+     */
+    getRange(tasks) {
+        if (!tasks || !tasks.length) {
+            return { start: new Date(), end: new Date() };
+        }
+        const startResult = orderBy(tasks, [{ field: this.mapper.taskFields.start, dir: 'asc' }]);
+        const endResult = orderBy(tasks, [{ field: this.mapper.taskFields.end, dir: 'desc' }]);
+        const firstDay = this.intlService.firstDay();
+        const rangeStart = this.mapper.extractFromTask(startResult[0], 'start') || new Date();
+        const rangeEnd = this.mapper.extractFromTask(endResult[0], 'end') || new Date();
+        if (firstDay === rangeEnd.getDay()) {
+            rangeEnd.setDate(rangeEnd.getDate() + 7);
+        }
+        const start = this.getStartOffset(rangeStart);
+        const end = this.getEndOffset(rangeEnd);
+        this._viewStart = Number(start);
+        return {
+            start: new Date(start),
+            end: new Date(end)
+        };
+    }
+    /**
+     *
+     * @param start - The tasks' range start date
+     * @param end - The tasks' range end date
+     * @returns {Array<Object>} - A collection containing the hour slots
+     */
+    getHours(start, end) {
+        const slots = [];
+        let workDayStart = this.intlService.parseDate(this.options.workDayStart).getHours();
+        let workDayEnd = this.intlService.parseDate(this.options.workDayEnd).getHours();
+        // TODO: retrieve from option?
+        let hourSpan = 1;
+        let startDate = new Date(start);
+        const endDate = new Date(end);
+        while (startDate < endDate) {
+            const slotEnd = new Date(startDate);
+            const isWorkSlot = isWorkHour(slotEnd, workDayStart, workDayEnd);
+            slotEnd.setHours(slotEnd.getHours() + hourSpan);
+            slots.push({
+                start: startDate,
+                end: slotEnd,
+                isWorking: isWorkSlot,
+                text: this.intlService.formatDate(startDate, HOUR_FORMAT),
+                span: 1
+            });
+            startDate = slotEnd;
+        }
+        return slots;
+    }
+    /**
+     *
+     * @param start - The tasks' range start date
+     * @param end - The tasks' range end date
+     * @returns {Array<Object>} - A collection containing the day slots
+     */
+    getDays(start, end) {
+        const slots = [];
+        let startDay = new Date(start);
+        let endDay = new Date(end);
+        while (startDay <= endDay) {
+            // Get the days with cleared time values (except for start and end day)
+            const nextDay = getDate(addDays(startDay, 1));
+            const isWorking = isWorkDay(startDay, this.options.workWeekStart, this.options.workWeekEnd);
+            // Need to get the end date with correct hours (important for day view)
+            let slotEnd = endDay < nextDay ? endDay : nextDay;
+            slots.push({
+                start: startDay,
+                end: slotEnd,
+                isWorking: isWorking,
+                text: this.intlService.formatDate(startDay, DAY_FORMAT),
+                span: 1
+            });
+            startDay = nextDay;
+        }
+        return slots;
+    }
+    getWeeks(start, end) {
+        const weekStart = this.intlService.firstDay();
+        const slots = [];
+        let startDay = new Date(start);
+        let endDay = new Date(end);
+        while (startDay <= endDay) {
+            const lastWeekDay = lastDayOfWeek(startDay, weekStart);
+            const slotEnd = lastWeekDay > endDay ? endDay : lastWeekDay;
+            const daySlots = this.getDays(startDay, slotEnd);
+            const span = daySlots.length;
+            const firstDay = this.intlService.formatDate(firstDayInWeek(getDate(startDay), weekStart), DAY_FORMAT);
+            const lastDay = this.intlService.formatDate(addDays(slotEnd, -1), DAY_FORMAT);
+            if (span > 0) {
+                slots.push({
+                    start: daySlots[0].start,
+                    end: daySlots[span - 1].end,
+                    text: `${firstDay} - ${lastDay}`,
+                    span: span
+                });
+            }
+            startDay = firstDayInWeek(addWeeks(slotEnd, 1));
+        }
+        return slots;
+    }
+    getMonths(start, end) {
+        const slots = [];
+        let startDay = new Date(start);
+        let endDay = new Date(end);
+        while (startDay < endDay) {
+            const endMonth = lastDayOfMonth(startDay);
+            let slotEnd = endDay < endMonth ? endDay : endMonth;
+            const daySlots = this.getDays(startDay, slotEnd);
+            const span = daySlots.length;
+            const monthStart = firstDayOfMonth(getDate(startDay));
+            const shortText = this.intlService.formatDate(monthStart, MONTH_FORMAT);
+            if (span > 0) {
+                slots.push({
+                    start: daySlots[0].start,
+                    end: daySlots[span - 1].end,
+                    span: span,
+                    text: shortText
+                });
+            }
+            startDay = firstDayOfMonth(addMonths(slotEnd, 1));
+        }
+        return slots;
+    }
+}

package/esm2015/timeline/timeline-day-view.component.js

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef } from '@angular/core';
+import { ViewBase } from './view-base';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/option-changes.service";
+import * as i2 from "../dependencies/dependency-dom.service";
+export class TimelineDayViewComponent extends ViewBase {
+    constructor(optionChangesService, dependencyDomService) {
+        super(optionChangesService, dependencyDomService);
+        /**
+         * The type for this view (`day`).
+         */
+        this.type = 'day';
+    }
+}
+TimelineDayViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineDayViewComponent, deps: [{ token: i1.OptionChangesService }, { token: i2.DependencyDomService }], target: i0.ɵɵFactoryTarget.Component });
+TimelineDayViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TimelineDayViewComponent, selector: "kendo-gantt-timeline-day-view", providers: [
+        {
+            provide: ViewBase,
+            useExisting: forwardRef(() => TimelineDayViewComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TimelineDayViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-gantt-timeline-day-view',
+                    template: '',
+                    providers: [
+                        {
+                            provide: ViewBase,
+                            useExisting: forwardRef(() => TimelineDayViewComponent)
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.OptionChangesService }, { type: i2.DependencyDomService }]; } });