@progress/kendo-angular-scheduler
Version:
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.
201 lines (200 loc) • 10.4 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ContentChild, forwardRef, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { IntlService } from '@progress/kendo-angular-intl';
import { addDays, addWeeks, firstDayInWeek, getDate } from '@progress/kendo-date-math';
import { SchedulerView } from '../../types';
import { ConfigurationViewBase } from '../common/configuration-view-base';
import { ViewContextService } from '../view-context.service';
import { ViewStateService } from '../view-state.service';
import { MultiWeekDaySlotTemplateDirective } from '../templates';
import { DAYS_IN_WEEK_COUNT, DEFAULT_EVENT_HEIGHT, WEEKS_COUNT } from '../constants';
import { isPresent } from '../../common/util';
import { MonthViewRendererComponent } from './month-view-renderer.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";
import * as i4 from "@progress/kendo-angular-intl";
/**
* Represents the component that renders the **Multi-Week** view in the Scheduler.
*
* @example
* ```html
* <kendo-scheduler>
* <kendo-scheduler-multi-week-view></kendo-scheduler-multi-week-view>
* </kendo-scheduler>
* ```
*/
export class MultiWeekViewComponent extends ConfigurationViewBase {
intl;
/**
* @hidden
*/
get title() {
return this.localization.get('multiWeekViewTitle');
}
/**
* Sets the height of the rendered events. If set to `'auto'`, the height is based on the event content
* ([see example](slug:multiweek_views_scheduler#configuring-the-height-of-the-scheduler-events)).
* > When set to `'auto'`, it automatically sets the `adaptiveSlotHeight` property to `true`.
*/
eventHeight;
/**
* Sets the number of events to render per day. If set to `'auto'`, all events display in the slot. If set to `0`, it normalizes to `1`
* ([see example](slug:multiweek_views_scheduler#setting-the-number-of-events-per-day)).
* > When set to `'auto'`, it automatically sets the `adaptiveSlotHeight` property to `true`.
* @default 2
*/
set eventsPerDay(events) {
this._eventsPerDay = !events ? 1 : events;
}
get eventsPerDay() {
return this._eventsPerDay;
}
_eventsPerDay;
/**
* Enables adaptive slot height. Increases the slot group (row) height when containing events up to the number of displayed events and reduces its height if there are fewer events for that slot group (row)
* ([see example](slug:multiweek_views_scheduler#enabling-the-adaptive-slot-height-of-the-scheduler)).
* @default false
*/
adaptiveSlotHeight;
/**
* Sets the number of weeks to render in the view.
* @default 6
*/
numberOfWeeks = WEEKS_COUNT;
/**
* 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).
* @default '{0:D} - {1:D}'
*/
selectedDateFormat = '{0:D} - {1:D}';
/**
* 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).
* @default '{0:d} - {1:d}'
*/
selectedShortDateFormat = '{0:d} - {1:d}';
multiWeekDaySlotTemplate;
/**
* The invariant name for this view.
* @default 'multiWeek'
*/
name = 'multiWeek';
get viewEventHeight() {
return isPresent(this.eventHeight) ? this.eventHeight : (this.schedulerOptions.eventHeight || DEFAULT_EVENT_HEIGHT);
}
constructor(localization, changeDetector, viewContext, viewState, intl) {
super(localization, changeDetector, viewContext, viewState);
this.intl = intl;
}
ngOnChanges(changes) {
if ((changes['eventHeight'] && changes['eventHeight'].currentValue === 'auto') ||
(changes['eventsPerDay'] && changes['eventsPerDay'].currentValue === 'auto')) {
this.adaptiveSlotHeight = true;
}
if ((changes['eventHeight'] && changes['eventHeight'].currentValue === 'auto' && !this.eventsPerDay) ||
(changes['adaptiveSlotHeight'] && changes['adaptiveSlotHeight'].currentValue === true && !this.eventsPerDay)) {
this.eventsPerDay = 2;
}
}
/**
* @hidden
*/
dateRange(date, weekStart) {
const periodStart = getDate(date);
const start = firstDayInWeek(periodStart, weekStart);
const end = addDays(start, (DAYS_IN_WEEK_COUNT * this.numberOfWeeks));
const text = this.intl.format(this.selectedDateFormat, start, end);
const shortText = this.intl.format(this.selectedShortDateFormat, start, end);
return { start, end, text, shortText };
}
/**
* @hidden
*/
newRange(date, direction = 1) {
return firstDayInWeek(addWeeks(date, this.numberOfWeeks * direction));
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiWeekViewComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }, { token: i4.IntlService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MultiWeekViewComponent, isStandalone: true, selector: "kendo-scheduler-multi-week-view", inputs: { eventHeight: "eventHeight", eventsPerDay: "eventsPerDay", adaptiveSlotHeight: "adaptiveSlotHeight", numberOfWeeks: "numberOfWeeks", selectedDateFormat: "selectedDateFormat", selectedShortDateFormat: "selectedShortDateFormat" }, providers: [{
provide: SchedulerView,
useExisting: forwardRef(() => MultiWeekViewComponent)
}], queries: [{ propertyName: "multiWeekDaySlotTemplate", first: true, predicate: MultiWeekDaySlotTemplateDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
<ng-template
<month-view
type="multiWeek"
[]="viewEventHeight"
[]="adaptiveSlotHeight"
[]="eventsPerDay"
[]="eventTemplate?.templateRef"
[]="viewSlotClass"
[]="viewEventClass"
[]="viewEventStyles"
[]="groupHeaderTemplate?.templateRef"
[]="multiWeekDaySlotTemplate?.templateRef"
[]="selectedDateFormat"
[]="selectedShortDateFormat"
[]="viewHighlightOngoingEvents"
[]="viewWeekStart"
[]="numberOfWeeks"
[]="dateRange"
[]="newRange">
</month-view>
</ng-template>
`, isInline: true, dependencies: [{ kind: "component", type: MonthViewRendererComponent, selector: "month-view", inputs: ["monthDaySlotTemplate", "highlightOngoingEvents", "type", "eventsPerDay", "adaptiveSlotHeight", "numberOfWeeks", "newRange", "dateRangeFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiWeekViewComponent, decorators: [{
type: Component,
args: [{
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'kendo-scheduler-multi-week-view',
providers: [{
provide: SchedulerView,
useExisting: forwardRef(() => MultiWeekViewComponent)
}],
template: `
<ng-template
<month-view
type="multiWeek"
[]="viewEventHeight"
[]="adaptiveSlotHeight"
[]="eventsPerDay"
[]="eventTemplate?.templateRef"
[]="viewSlotClass"
[]="viewEventClass"
[]="viewEventStyles"
[]="groupHeaderTemplate?.templateRef"
[]="multiWeekDaySlotTemplate?.templateRef"
[]="selectedDateFormat"
[]="selectedShortDateFormat"
[]="viewHighlightOngoingEvents"
[]="viewWeekStart"
[]="numberOfWeeks"
[]="dateRange"
[]="newRange">
</month-view>
</ng-template>
`,
standalone: true,
imports: [MonthViewRendererComponent]
}]
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }, { type: i4.IntlService }], propDecorators: { eventHeight: [{
type: Input
}], eventsPerDay: [{
type: Input
}], adaptiveSlotHeight: [{
type: Input
}], numberOfWeeks: [{
type: Input
}], selectedDateFormat: [{
type: Input
}], selectedShortDateFormat: [{
type: Input
}], multiWeekDaySlotTemplate: [{
type: ContentChild,
args: [MultiWeekDaySlotTemplateDirective]
}] } });