@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.
167 lines (164 loc) • 7.16 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, ElementRef, Component, ChangeDetectorRef } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { BaseSlotDirective } from '../view-items/base-slot.directive';
import { MonthSlotService } from './month-slot.service';
import { firstElementChild } from '../../common/dom-queries';
import { addUTCDays, toUTCDate } from '../utils';
import { firstDayOfMonth, isEqualDate } from '@progress/kendo-date-math';
import { moreHorizontalIcon } from '@progress/kendo-svg-icons';
import { DatePipe } from '@progress/kendo-angular-intl';
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "./month-slot.service";
import * as i2 from "@progress/kendo-angular-l10n";
/**
* @hidden
*/
export class MonthSlotComponent extends BaseSlotDirective {
cdr;
style;
showMoreButton;
moreHorizontalIcon = moreHorizontalIcon;
resourcesByIndex;
monthDaySlotTemplateRef;
eventsPerDay;
eventHeight;
adaptiveSlotHeight;
set day(value) {
this._day = value;
this.start = value;
}
/**
* For the slot template we need the day value without the UTC conversion
* - timezone does not matter for the day part in this case as the calendar month view is the same for every timezone
* otherwise the date is incorrect for some timezones (e.g. LA timezone) -
* For example, it displays Feb. 8, 2023 to be Thursday, wherease it is Wednesday
*/
get day() {
return this._day;
}
set start(value) {
this.startDate = toUTCDate(value);
}
get start() {
return this.startDate;
}
isDaySlot = true;
get end() {
return addUTCDays(this.start, 1);
}
isFirstDayOfMonth(day) {
return isEqualDate(day, firstDayOfMonth(day));
}
get linkHeight() {
if (this._linkHeight === null) {
const element = firstElementChild(this.nativeElement);
this._linkHeight = element ? element.offsetHeight + element.offsetTop : 0;
}
return this._linkHeight;
}
startDate;
_day;
_linkHeight = null;
constructor(element, slotService, localization, cdr) {
super(element, slotService, localization);
this.cdr = cdr;
}
ngOnDestroy() {
super.ngOnDestroy();
this.removeShowMore();
}
showMore(rect) {
this.showMoreButton = true;
this.style = `width: ${rect.width}px; left: ${rect.left}px; top: ${rect.top}px; border-color: inherit;`;
this.cdr.detectChanges();
}
hideMore() {
this.showMoreButton = false;
this.removeShowMore();
}
invalidate() {
super.invalidate();
this._linkHeight = null;
this.showMoreButton = false;
this.removeShowMore();
}
removeShowMore() {
this.showMoreButton = false;
this.cdr.detectChanges();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MonthSlotComponent, deps: [{ token: i0.ElementRef }, { token: i1.MonthSlotService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MonthSlotComponent, isStandalone: true, selector: "[monthSlot]", inputs: { resourcesByIndex: "resourcesByIndex", monthDaySlotTemplateRef: "monthDaySlotTemplateRef", eventsPerDay: "eventsPerDay", eventHeight: "eventHeight", adaptiveSlotHeight: "adaptiveSlotHeight", day: ["monthSlot", "day"] }, usesInheritance: true, ngImport: i0, template: `
(!monthDaySlotTemplateRef) {
<span aria-hidden="true" class="k-link k-nav-day">
{{ day | kendoDate: isFirstDayOfMonth(day) ? 'MMM dd' : 'dd' }}
</span>
}
(monthDaySlotTemplateRef) {
<ng-container
[ngTemplateOutlet]="monthDaySlotTemplateRef"
[ngTemplateOutletContext]="{ date: day, resources: resourcesByIndex }"
>
</ng-container>
}
(showMoreButton) {
<div class="k-more-events k-button" [style]="style">
<kendo-icon-wrapper
name="more-horizontal"
[svgIcon]="moreHorizontalIcon"
>
</kendo-icon-wrapper>
</div>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "pipe", type: DatePipe, name: "kendoDate" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MonthSlotComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/directive-selector
selector: '[monthSlot]',
template: `
(!monthDaySlotTemplateRef) {
<span aria-hidden="true" class="k-link k-nav-day">
{{ day | kendoDate: isFirstDayOfMonth(day) ? 'MMM dd' : 'dd' }}
</span>
}
(monthDaySlotTemplateRef) {
<ng-container
[ngTemplateOutlet]="monthDaySlotTemplateRef"
[ngTemplateOutletContext]="{ date: day, resources: resourcesByIndex }"
>
</ng-container>
}
(showMoreButton) {
<div class="k-more-events k-button" [style]="style">
<kendo-icon-wrapper
name="more-horizontal"
[svgIcon]="moreHorizontalIcon"
>
</kendo-icon-wrapper>
</div>
}
`,
standalone: true,
imports: [NgTemplateOutlet, IconWrapperComponent, DatePipe]
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MonthSlotService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { resourcesByIndex: [{
type: Input
}], monthDaySlotTemplateRef: [{
type: Input
}], eventsPerDay: [{
type: Input
}], eventHeight: [{
type: Input
}], adaptiveSlotHeight: [{
type: Input
}], day: [{
type: Input,
args: ['monthSlot']
}] } });