@progress/kendo-angular-scheduler/esm2022/views/timeline/timeline-view.component.mjs

Kendo UI Scheduler Angular - Outlook or Google-style angular scheduler calendar. Full-featured and customizable embedded scheduling from the creator developers trust for professional UI components.

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, forwardRef, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { SchedulerView } from '../../types';
import { TimelineBase } from './timeline-base';
import { ViewContextService } from '../view-context.service';
import { ViewStateService } from '../view-state.service';
import { WorkHoursFooterDirective } from '../common/work-hours-footer.directive';
import { ViewFooterComponent } from '../common/view-footer.component';
import { TimelineMultiDayViewComponent } from './timeline-multi-day-view.component';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
import * as i2 from "../view-context.service";
import * as i3 from "../view-state.service";
/**
 * Represents the component that renders the **Timeline** view in the Scheduler.
 *
 * @example
 * ```html
 * <kendo-scheduler>
 *      <kendo-scheduler-timeline-view></kendo-scheduler-timeline-view>
 * </kendo-scheduler>
 * ```
 */
export class TimelineViewComponent extends TimelineBase {
    /**
     * @hidden
     */
    get title() {
        return this.localization.get('timelineViewTitle');
    }
    /**
     * Sets the long-date format for the selected date in the Scheduler toolbar.
     * For more information, see [Parsing and Formatting Dates and Numbers](slug:parsingandformatting_intl#date-formatting).
     * If `numberOfDays` is greater than 1, the default format displays a range: `'{0:D} - {1:D}'`, where `0` is the start and `1` is the end date.
     * @default '{0:D}'
     */
    set selectedDateFormat(format) {
        this._selectedDateFormat = format;
    }
    get selectedDateFormat() {
        if (this._selectedDateFormat) {
            return this._selectedDateFormat;
        }
        return this.numberOfDays && this.numberOfDays > 1 ? '{0:D} - {1:D}' : '{0:D}';
    }
    _selectedDateFormat;
    /**
     * Sets the short-date format for the selected date in the Scheduler toolbar.
     * For more information, see [Parsing and Formatting Dates and Numbers](slug:parsingandformatting_intl#date-formatting).
     * If `numberOfDays` is greater than 1, the default format displays a range: `'{0:d} - {1:d}'`, where `0` is the start and `1` is the end date.
     * @default '{0:d}'
     */
    set selectedShortDateFormat(format) {
        this._selectedShortDateFormat = format;
    }
    get selectedShortDateFormat() {
        if (this._selectedShortDateFormat) {
            return this._selectedShortDateFormat;
        }
        return this.numberOfDays && this.numberOfDays > 1 ? '{0:d} - {1:d}' : '{0:d}';
    }
    _selectedShortDateFormat;
    /**
     * Sets the number of days to render in the view.
     * If the value is less than or equal to 0, it defaults to 1.
     * @default 1
     */
    set numberOfDays(days) {
        this._numberOfDays = days > 0 ? days : 1;
    }
    get numberOfDays() {
        return this._numberOfDays;
    }
    _numberOfDays = 1;
    /**
     * The invariant name for this view.
     * @default 'timeline'
     */
    name = 'timeline';
    constructor(localization, changeDetector, viewContext, viewState) {
        super(localization, changeDetector, viewContext, viewState);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineViewComponent, isStandalone: true, selector: "kendo-scheduler-timeline-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat", numberOfDays: "numberOfDays" }, providers: [{
                provide: SchedulerView,
                useExisting: forwardRef(() => TimelineViewComponent)
            }], usesInheritance: true, ngImport: i0, template: `
        <ng-template #content>
          <timeline-multi-day-view
            [name]="name"
            [numberOfDays]="numberOfDays"
            [eventHeight]="viewEventHeight"
            [columnWidth]="viewColumnWidth"
            [currentTimeMarker]="viewCurrentTimeMarker"
            [highlightOngoingEvents]="viewHighlightOngoingEvents"
            [showWorkHours]="shouldShowWorkHours"
            [scrollTime]="viewScrollTime"
            [startTime]="viewStartTime"
            [endTime]="viewEndTime"
            [workDayStart]="viewWorkDayStart"
            [workDayEnd]="viewWorkDayEnd"
            [workWeekStart]="viewWorkWeekStart"
            [workWeekEnd]="viewWorkWeekEnd"
            [slotDuration]="viewSlotDuration"
            [slotDivisions]="viewSlotDivisions"
            [slotClass]="viewSlotClass"
            [eventClass]="viewEventClass"
            [eventStyles]="viewEventStyles"
            [eventTemplate]="eventTemplate?.templateRef"
            [groupHeaderTemplate]="groupHeaderTemplate?.templateRef"
            [timeSlotTemplate]="timeSlotTemplate?.templateRef"
            [majorTimeHeaderTemplate]="majorTimeHeaderTemplate?.templateRef"
            [minorTimeHeaderTemplate]="minorTimeHeaderTemplate?.templateRef"
            [dateHeaderTemplate]="dateHeaderTemplate?.templateRef"
            [selectedDateFormat]="selectedDateFormat"
            [selectedShortDateFormat]="selectedShortDateFormat">
          </timeline-multi-day-view>
          @if (viewShowFooter) {
            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
          }
        </ng-template>
        `, isInline: true, dependencies: [{ kind: "component", type: TimelineMultiDayViewComponent, selector: "timeline-multi-day-view", inputs: ["name", "columnWidth", "viewName"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineViewComponent, decorators: [{
            type: Component,
            args: [{
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    selector: 'kendo-scheduler-timeline-view',
                    providers: [{
                            provide: SchedulerView,
                            useExisting: forwardRef(() => TimelineViewComponent)
                        }],
                    template: `
        <ng-template #content>
          <timeline-multi-day-view
            [name]="name"
            [numberOfDays]="numberOfDays"
            [eventHeight]="viewEventHeight"
            [columnWidth]="viewColumnWidth"
            [currentTimeMarker]="viewCurrentTimeMarker"
            [highlightOngoingEvents]="viewHighlightOngoingEvents"
            [showWorkHours]="shouldShowWorkHours"
            [scrollTime]="viewScrollTime"
            [startTime]="viewStartTime"
            [endTime]="viewEndTime"
            [workDayStart]="viewWorkDayStart"
            [workDayEnd]="viewWorkDayEnd"
            [workWeekStart]="viewWorkWeekStart"
            [workWeekEnd]="viewWorkWeekEnd"
            [slotDuration]="viewSlotDuration"
            [slotDivisions]="viewSlotDivisions"
            [slotClass]="viewSlotClass"
            [eventClass]="viewEventClass"
            [eventStyles]="viewEventStyles"
            [eventTemplate]="eventTemplate?.templateRef"
            [groupHeaderTemplate]="groupHeaderTemplate?.templateRef"
            [timeSlotTemplate]="timeSlotTemplate?.templateRef"
            [majorTimeHeaderTemplate]="majorTimeHeaderTemplate?.templateRef"
            [minorTimeHeaderTemplate]="minorTimeHeaderTemplate?.templateRef"
            [dateHeaderTemplate]="dateHeaderTemplate?.templateRef"
            [selectedDateFormat]="selectedDateFormat"
            [selectedShortDateFormat]="selectedShortDateFormat">
          </timeline-multi-day-view>
          @if (viewShowFooter) {
            <div viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
          }
        </ng-template>
        `,
                    standalone: true,
                    imports: [TimelineMultiDayViewComponent, ViewFooterComponent, WorkHoursFooterDirective]
                }]
        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }], propDecorators: { selectedDateFormat: [{
                type: Input
            }], selectedShortDateFormat: [{
                type: Input
            }], numberOfDays: [{
                type: Input
            }] } });