@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.
243 lines (242 loc) • 8.61 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 { Input, ContentChild, ChangeDetectorRef, Directive } from '@angular/core';
import { ConfigurationViewBase } from '../common/configuration-view-base';
import { TimeSlotTemplateDirective, DateHeaderTemplateDirective, MajorTimeHeaderTemplateDirective, MinorTimeHeaderTemplateDirective } from '../templates';
import { ViewContextService } from '../view-context.service';
import { ViewStateService } from '../view-state.service';
import { DEFAULT_EVENT_HEIGHT } from '../constants';
import { isPresent } from '../../common/util';
import { Day } from '@progress/kendo-date-math';
import { LocalizationService } from '@progress/kendo-angular-l10n';
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";
const EVENT_HEIGHT = 'eventHeight';
const SHOW_WORK_HOURS = 'showWorkHours';
const START_TIME = 'startTime';
const END_TIME = 'endTime';
const WORK_DAY_START = 'workDayStart';
const WORK_DAY_END = 'workDayEnd';
const WORK_WEEK_START = 'workWeekStart';
const WORK_WEEK_END = 'workWeekEnd';
const SLOT_DURATION = 'slotDuration';
const SLOT_DIVISIONS = 'slotDivisions';
const CURRENT_TIME_MARKER = 'currentTimeMarker';
const HIGHLIGHT_ONGOING_EVENTS = 'highlightOngoingEvents';
/**
* @hidden
*/
export class DayTimeViewBase extends ConfigurationViewBase {
/**
* @hidden
*/
timeSlotTemplate;
/**
* @hidden
*/
dateHeaderTemplate;
/**
* @hidden
*/
majorTimeHeaderTemplate;
/**
* @hidden
*/
minorTimeHeaderTemplate;
/**
* If set to `true`, the view will be initially shown in the business-hours mode.
* By default, the view is displayed in the full-day mode.
* @default false
*/
showWorkHours;
/**
* Specifies whether to display the footer of the Scheduler.
*/
showFooter;
/**
* The height of the events.
*/
eventHeight;
/**
* The start time of the view. The Scheduler displays events which start after the start time.
* Accepts string values in the `HH:mm` format.
*/
startTime;
/**
* The time to which the view will initially be scrolled.
* Accepts string values in the `HH:mm` format or a JavaScript `Date`.
*/
scrollTime;
/**
* The end time of the view. The Scheduler displays events which end before the end time.
* Accepts string values in the `HH:mm` format.
*/
endTime;
/**
* The start time of the view when `showWorkHours` is set to `true`.
* Accepts string values in the `HH:mm` format.
*/
workDayStart;
/**
* The end time of the view when `showWorkHours` is set to `true`.
* Accepts string values in the `HH:mm` format.
*/
workDayEnd;
/**
* The start of the work week.
*/
workWeekStart;
/**
* The end of the work week.
*/
workWeekEnd;
/**
* The duration (in minutes) of the time slots.
*/
slotDuration;
/**
* The number of divisions of the time slots.
*/
slotDivisions;
/**
* Specifies the settings for the current time marker of the Scheduler.
*/
currentTimeMarker;
/**
* @hidden
*/
get viewEventHeight() {
return this.optionValue(EVENT_HEIGHT) || DEFAULT_EVENT_HEIGHT;
}
/**
* @hidden
*/
get shouldShowWorkHours() {
return this.optionValue(SHOW_WORK_HOURS);
}
/**
* @hidden
*/
get viewStartTime() {
return this.optionValue(START_TIME);
}
/**
* @hidden
*/
get viewEndTime() {
return this.optionValue(END_TIME);
}
/**
* @hidden
*/
get viewWorkDayStart() {
return this.optionValue(WORK_DAY_START);
}
/**
* @hidden
*/
get viewWorkDayEnd() {
return this.optionValue(WORK_DAY_END);
}
/**
* @hidden
*/
get viewWorkWeekStart() {
return this.optionValue(WORK_WEEK_START);
}
/**
* @hidden
*/
get viewWorkWeekEnd() {
return this.optionValue(WORK_WEEK_END);
}
/**
* @hidden
*/
get viewSlotDuration() {
return this.optionValue(SLOT_DURATION);
}
/**
* @hidden
*/
get viewSlotDivisions() {
return this.optionValue(SLOT_DIVISIONS);
}
/**
* @hidden
*/
get viewCurrentTimeMarker() {
return this.optionValue(CURRENT_TIME_MARKER);
}
/**
* @hidden
*/
get viewHighlightOngoingEvents() {
return this.optionValue(HIGHLIGHT_ONGOING_EVENTS);
}
/**
* @hidden
*/
get viewScrollTime() {
return this.optionValue('scrollTime');
}
/**
* @hidden
*/
get viewShowFooter() {
return isPresent(this.showFooter) ? this.showFooter : this.schedulerOptions.showFooter;
}
constructor(localization, changeDetector, viewContext, viewState) {
super(localization, changeDetector, viewContext, viewState);
}
optionValue(name) {
return isPresent(this[name]) ? this[name] : this.schedulerOptions[name];
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DayTimeViewBase, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.ViewContextService }, { token: i3.ViewStateService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DayTimeViewBase, inputs: { showWorkHours: "showWorkHours", showFooter: "showFooter", eventHeight: "eventHeight", startTime: "startTime", scrollTime: "scrollTime", endTime: "endTime", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", slotDuration: "slotDuration", slotDivisions: "slotDivisions", currentTimeMarker: "currentTimeMarker" }, queries: [{ propertyName: "timeSlotTemplate", first: true, predicate: TimeSlotTemplateDirective, descendants: true }, { propertyName: "dateHeaderTemplate", first: true, predicate: DateHeaderTemplateDirective, descendants: true }, { propertyName: "majorTimeHeaderTemplate", first: true, predicate: MajorTimeHeaderTemplateDirective, descendants: true }, { propertyName: "minorTimeHeaderTemplate", first: true, predicate: MinorTimeHeaderTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DayTimeViewBase, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.ViewContextService }, { type: i3.ViewStateService }]; }, propDecorators: { timeSlotTemplate: [{
type: ContentChild,
args: [TimeSlotTemplateDirective, { static: false }]
}], dateHeaderTemplate: [{
type: ContentChild,
args: [DateHeaderTemplateDirective, { static: false }]
}], majorTimeHeaderTemplate: [{
type: ContentChild,
args: [MajorTimeHeaderTemplateDirective, { static: false }]
}], minorTimeHeaderTemplate: [{
type: ContentChild,
args: [MinorTimeHeaderTemplateDirective, { static: false }]
}], showWorkHours: [{
type: Input
}], showFooter: [{
type: Input
}], eventHeight: [{
type: Input
}], startTime: [{
type: Input
}], scrollTime: [{
type: Input
}], endTime: [{
type: Input
}], workDayStart: [{
type: Input
}], workDayEnd: [{
type: Input
}], workWeekStart: [{
type: Input
}], workWeekEnd: [{
type: Input
}], slotDuration: [{
type: Input
}], slotDivisions: [{
type: Input
}], currentTimeMarker: [{
type: Input
}] } });