@progress/kendo-angular-scheduler/esm2022/views/multi-day/day-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, ContentChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { SchedulerView } from '../../types';
import { MultiDayViewBase } from './multi-day-view-base';
import { ViewContextService } from '../view-context.service';
import { ViewStateService } from '../view-state.service';
import { AllDaySlotTemplateDirective, AllDayEventTemplateDirective } from '../templates';
import { WorkHoursFooterDirective } from '../common/work-hours-footer.directive';
import { ViewFooterComponent } from '../common/view-footer.component';
import { MultiDayViewRendererComponent } from './multi-day-view-renderer.component';
import { NgIf } from '@angular/common';
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";
/**
 * The component for rendering the **Day** view.
 */
export class DayViewComponent extends MultiDayViewBase {
    /**
     * @hidden
     */
    get title() {
        return this.localization.get('dayViewTitle');
    }
    /**
     * The long-date format for displaying the
     * selected date in the Scheduler toolbar.
     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
     * @default '{0:D}'
     */
    set selectedDateFormat(value) {
        this._selectedDateFormat = value;
    }
    get selectedDateFormat() {
        return this._selectedDateFormat;
    }
    /**
     * The short-date format for displaying the
     * selected date in the Scheduler toolbar.
     * ([more information]({% slug parsingandformatting_intl %}#toc-date-formatting)).
     * @default '{0:d}'
     */
    set selectedShortDateFormat(value) {
        this._selectedShortDateFormat = value;
    }
    get selectedShortDateFormat() {
        return this._selectedShortDateFormat;
    }
    /**
     * @hidden
     */
    allDaySlotTemplate;
    /**
     * @hidden
     */
    allDayEventTemplate;
    /**
     * The invariant name for this view.
     * @default 'day'
     */
    name = 'day';
    _selectedDateFormat = '{0:D}';
    _selectedShortDateFormat = '{0:d}';
    constructor(localization, changeDetector, viewContext, viewState) {
        super(localization, changeDetector, viewContext, viewState);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DayViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DayViewComponent, isStandalone: true, selector: "kendo-scheduler-day-view", inputs: { selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
                provide: SchedulerView,
                useExisting: forwardRef(() => DayViewComponent)
            }], queries: [{ propertyName: "allDaySlotTemplate", first: true, predicate: AllDaySlotTemplateDirective, descendants: true }, { propertyName: "allDayEventTemplate", first: true, predicate: AllDayEventTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `
        <ng-template #content>
            <multi-day-view
                [name]="name"
                [allDaySlot]="viewAllDaySlot"
                [eventHeight]="viewEventHeight"
                [currentTimeMarker]="viewCurrentTimeMarker"
                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                [showWorkHours]="shouldShowWorkHours"
                [scrollTime]="viewScrollTime"
                [startTime]="viewStartTime"
                [endTime]="viewEndTime"
                [workDayStart]="viewWorkDayStart"
                [workDayEnd]="viewWorkDayEnd"
                [workWeekStart]="viewWorkWeekStart"
                [workWeekEnd]="viewWorkWeekEnd"
                [slotDuration]="viewSlotDuration"
                [slotDivisions]="viewSlotDivisions"
                [slotFill]="viewSlotFill"
                [slotClass]="viewSlotClass"
                [eventClass]="viewEventClass"
                [eventStyles]="viewEventStyles"
                [allDaySlotTemplate]="allDaySlotTemplate?.templateRef"
                [allDayEventTemplate]="allDayEventTemplate?.templateRef"
                [eventTemplate]="eventTemplate?.templateRef"
                [groupHeaderTemplate]="groupHeaderTemplate?.templateRef"
                [timeSlotTemplate]="timeSlotTemplate?.templateRef"
                [minorTimeHeaderTemplate]="minorTimeHeaderTemplate?.templateRef"
                [majorTimeHeaderTemplate]="majorTimeHeaderTemplate?.templateRef"
                [dateHeaderTemplate]="dateHeaderTemplate?.templateRef"
                [selectedDateFormat]="selectedDateFormat"
                [selectedShortDateFormat]="selectedShortDateFormat">
            </multi-day-view>
            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
        </ng-template>
    `, isInline: true, dependencies: [{ kind: "component", type: MultiDayViewRendererComponent, selector: "multi-day-view", inputs: ["allDaySlot", "name", "slotFill", "allDaySlotTemplate", "allDayEventTemplate"] }, { kind: "component", type: ViewFooterComponent, selector: "[viewFooter]", inputs: ["items"], outputs: ["itemClick"] }, { kind: "directive", type: WorkHoursFooterDirective, selector: "[kendoWorkHoursFooter]", inputs: ["showWorkHours"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DayViewComponent, decorators: [{
            type: Component,
            args: [{
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    selector: 'kendo-scheduler-day-view',
                    providers: [{
                            provide: SchedulerView,
                            useExisting: forwardRef(() => DayViewComponent)
                        }],
                    template: `
        <ng-template #content>
            <multi-day-view
                [name]="name"
                [allDaySlot]="viewAllDaySlot"
                [eventHeight]="viewEventHeight"
                [currentTimeMarker]="viewCurrentTimeMarker"
                [highlightOngoingEvents]="viewHighlightOngoingEvents"
                [showWorkHours]="shouldShowWorkHours"
                [scrollTime]="viewScrollTime"
                [startTime]="viewStartTime"
                [endTime]="viewEndTime"
                [workDayStart]="viewWorkDayStart"
                [workDayEnd]="viewWorkDayEnd"
                [workWeekStart]="viewWorkWeekStart"
                [workWeekEnd]="viewWorkWeekEnd"
                [slotDuration]="viewSlotDuration"
                [slotDivisions]="viewSlotDivisions"
                [slotFill]="viewSlotFill"
                [slotClass]="viewSlotClass"
                [eventClass]="viewEventClass"
                [eventStyles]="viewEventStyles"
                [allDaySlotTemplate]="allDaySlotTemplate?.templateRef"
                [allDayEventTemplate]="allDayEventTemplate?.templateRef"
                [eventTemplate]="eventTemplate?.templateRef"
                [groupHeaderTemplate]="groupHeaderTemplate?.templateRef"
                [timeSlotTemplate]="timeSlotTemplate?.templateRef"
                [minorTimeHeaderTemplate]="minorTimeHeaderTemplate?.templateRef"
                [majorTimeHeaderTemplate]="majorTimeHeaderTemplate?.templateRef"
                [dateHeaderTemplate]="dateHeaderTemplate?.templateRef"
                [selectedDateFormat]="selectedDateFormat"
                [selectedShortDateFormat]="selectedShortDateFormat">
            </multi-day-view>
            <div *ngIf="viewShowFooter" viewFooter kendoWorkHoursFooter [showWorkHours]="shouldShowWorkHours" (itemClick)="showWorkHours = !shouldShowWorkHours"></div>
        </ng-template>
    `,
                    standalone: true,
                    imports: [MultiDayViewRendererComponent, ViewFooterComponent, WorkHoursFooterDirective, NgIf]
                }]
        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }]; }, propDecorators: { selectedDateFormat: [{
                type: Input
            }], selectedShortDateFormat: [{
                type: Input
            }], allDaySlotTemplate: [{
                type: ContentChild,
                args: [AllDaySlotTemplateDirective, { static: false }]
            }], allDayEventTemplate: [{
                type: ContentChild,
                args: [AllDayEventTemplateDirective, { static: false }]
            }] } });