@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.
470 lines (387 loc) • 24.9 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, EventEmitter, Input, Output, forwardRef, HostBinding } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { isChanged } from '@progress/kendo-angular-common';
import { IntlService } from '@progress/kendo-angular-intl';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { getDate, Day } from '@progress/kendo-date-math';
import { RecurrenceService } from './recurrence.service';
import { isPresent } from '../../common/util';
import { RecurrenceLocalizationService } from './localization/recurrence-localization.service';
import { RecurrenceEndRuleEditorComponent } from './recurrence-end-rule-editor.component';
import { RecurrenceMonthlyYearlyEditorComponent } from './recurrence-monthly-yearly-editor.component';
import { RecurrenceWeekdayRuleEditorComponent } from './recurrence-weekday-rule-editor.component';
import { RecurrenceIntervalEditorComponent } from './recurrence-interval-editor.component';
import { NgIf } from '@angular/common';
import { RecurrenceFrequencyEditorComponent } from './recurrence-frequency-editor.component';
import { RecurrenceEditorLocalizedMessagesDirective } from './localization/localized-messages.directive';
import * as i0 from "@angular/core";
import * as i1 from "./recurrence.service";
import * as i2 from "@progress/kendo-angular-intl";
/**
* @hidden
*/
export const RECURRENCE_VALUE_ACCESSOR = {
multi: true,
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RecurrenceEditorComponent)
};
/**
* Represents the Kendo UI Recurrence Editor component for Angular. [This example](slug:custom_reactive_editing_scheduler) demonstrates the Recurrence Editor, among other components.
*/
export class RecurrenceEditorComponent {
recurrenceService;
intl;
cssClass = true;
/**
* Specifies the start date of the event.
*/
set start(value) {
this._start = value;
}
get start() {
return isPresent(this._start) ? this._start : getDate(new Date());
}
/**
* Specifies the id of the timezone that will be used.
* @default 'Etc/UTC'
*/
timezone = 'Etc/UTC';
/**
* The first day of the week. Defaults to the locale settings.
*/
weekStart;
/**
* Specifies the options of the `Repeat Every` NumericTextBox component within the recurrence `interval` editor.
*/
repeatEveryOptions;
/**
* Specifies the options of the `End After` NumericTextBox component within the recurrence `count` rule editor.
*/
endAfterOptions;
/**
* Specifies the options of the `Repeat On` NumericTextBox component for choosing the day
* an event will occur on within the monthly and yearly sections of the recurrence editor.
*/
repeatOnOptions;
/**
* Specifies the options of the `End On` DatePicker component within the recurrence `until` rule editor.
*/
endOnOptions;
/**
* Fires when the value of the component has changed.
*/
valueChange = new EventEmitter();
_start;
subscriptions;
constructor(recurrenceService, intl) {
this.recurrenceService = recurrenceService;
this.intl = intl;
this.weekStart = this.intl.firstDay();
this.subscriptions = this.recurrenceService.change.subscribe((rrule) => {
this.emitChange(rrule);
});
}
/**
* @hidden
*/
get currentFreq() {
return this.recurrenceService.frequency;
}
/**
* @hidden
*/
ngOnInit() {
this.recurrenceService.init('', this.start, this.timezone, this.weekStart);
}
ngOnChanges(changes) {
if (isChanged('start', changes)) {
this.recurrenceService.start = this.start;
}
}
/**
* @hidden
*/
ngOnDestroy() {
if (this.subscriptions) {
this.subscriptions.unsubscribe();
}
}
/**
* @hidden
*/
writeValue(rrule) {
this.recurrenceService.init(typeof rrule === 'string' ? rrule : '', this.start, this.timezone, this.weekStart);
}
onTouchedCallback = (_) => { };
onChangeCallback = (_) => { };
/**
* @hidden
*/
registerOnChange(fn) {
this.onChangeCallback = fn;
}
/**
* @hidden
*/
registerOnTouched(fn) {
this.onTouchedCallback = fn;
}
emitChange(rrule) {
this.onChangeCallback(rrule);
this.valueChange.emit(rrule);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecurrenceEditorComponent, deps: [{ token: i1.RecurrenceService }, { token: i2.IntlService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RecurrenceEditorComponent, isStandalone: true, selector: "kendo-recurrence-editor", inputs: { start: "start", timezone: "timezone", weekStart: "weekStart", repeatEveryOptions: "repeatEveryOptions", endAfterOptions: "endAfterOptions", repeatOnOptions: "repeatOnOptions", endOnOptions: "endOnOptions" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.k-recurrence-editor": "this.cssClass" } }, providers: [
RecurrenceLocalizationService,
{
provide: LocalizationService,
useExisting: RecurrenceLocalizationService
},
{
provide: L10N_PREFIX,
useValue: 'kendo.recurrenceeditor'
},
RECURRENCE_VALUE_ACCESSOR,
RecurrenceService
], exportAs: ["kendoRecurrenceEditor"], usesOnChanges: true, ngImport: i0, template: `
<ng-container kendoRecurrenceEditorLocalizedMessages
i18n-repeat="kendo.recurrenceeditor.repeat|The text similar to 'Repeat' displayed in the recurrence editor."
repeat='Repeat'
i18n-dailyInterval="kendo.recurrenceeditor.dailyInterval|The text similar to 'day(s)' displayed in the recurrence editor."
dailyInterval='day(s)'
i18n-dailyRepeatEvery="kendo.recurrenceeditor.dailyRepeatEvery|The text similar to 'Repeat every' displayed in the recurrence editor."
dailyRepeatEvery='Repeat every'
i18n-weeklyInterval="kendo.recurrenceeditor.weeklyInterval|The text similar to 'week(s)' displayed in the recurrence editor."
weeklyInterval='week(s)'
i18n-weeklyRepeatEvery="kendo.recurrenceeditor.weeklyRepeatEvery|The text similar to 'Repeat every' displayed in the recurrence editor."
weeklyRepeatEvery='Repeat every'
i18n-weeklyRepeatOn="kendo.recurrenceeditor.weeklyRepeatOn|The text similar to 'Repeat on' displayed in the recurrence editor."
weeklyRepeatOn='Repeat on'
i18n-monthlyDay="kendo.recurrenceeditor.monthlyDay|The text similar to 'Day' displayed in the recurrence editor."
monthlyDay='Day'
i18n-monthlyInterval="kendo.recurrenceeditor.monthlyInterval|The text similar to 'month(s)' displayed in the recurrence editor."
monthlyInterval='month(s)'
i18n-monthlyRepeatEvery="kendo.recurrenceeditor.monthlyRepeatEvery|The text similar to 'Repeat every' displayed in the recurrence editor."
monthlyRepeatEvery='Repeat every'
i18n-monthlyRepeatOn="kendo.recurrenceeditor.monthlyRepeatOn|The text similar to 'Repeat on' displayed in the recurrence editor."
monthlyRepeatOn='Repeat on'
i18n-yearlyOf="kendo.recurrenceeditor.yearlyOf|The text similar to 'of' displayed in the recurrence editor."
yearlyOf='of'
i18n-yearlyRepeatEvery="kendo.recurrenceeditor.yearlyRepeatEvery|The text similar to 'Repeat every' displayed in the recurrence editor."
yearlyRepeatEvery='Repeat every'
i18n-yearlyRepeatOn="kendo.recurrenceeditor.yearlyRepeatOn|The text similar to 'Repeat on' displayed in the recurrence editor."
yearlyRepeatOn='Repeat on'
i18n-yearlyInterval="kendo.recurrenceeditor.yearlyInterval|The text similar to 'year(s)' displayed in the recurrence editor."
yearlyInterval='year(s)'
i18n-frequenciesDaily="kendo.recurrenceeditor.frequenciesDaily|The text similar to 'Daily' displayed in the recurrence editor."
frequenciesDaily='Daily'
i18n-frequenciesMonthly="kendo.recurrenceeditor.frequenciesMonthly|The text similar to 'Monthly' displayed in the recurrence editor."
frequenciesMonthly='Monthly'
i18n-frequenciesNever="kendo.recurrenceeditor.frequenciesNever|The text similar to 'Never' displayed in the recurrence editor."
frequenciesNever='Never'
i18n-frequenciesWeekly="kendo.recurrenceeditor.frequenciesWeekly|The text similar to 'Weekly' displayed in the recurrence editor."
frequenciesWeekly='Weekly'
i18n-frequenciesYearly="kendo.recurrenceeditor.frequenciesYearly|The text similar to 'Yearly' displayed in the recurrence editor."
frequenciesYearly='Yearly'
i18n-offsetPositionsFirst="kendo.recurrenceeditor.offsetPositionsFirst|The text similar to 'First' displayed in the recurrence editor."
offsetPositionsFirst='First'
i18n-offsetPositionsSecond="kendo.recurrenceeditor.offsetPositionsSecond|The text similar to 'Second' displayed in the recurrence editor."
offsetPositionsSecond='Second'
i18n-offsetPositionsThird="kendo.recurrenceeditor.offsetPositionsThird|The text similar to 'Third' displayed in the recurrence editor."
offsetPositionsThird='Third'
i18n-offsetPositionsFourth="kendo.recurrenceeditor.offsetPositionsFourth|The text similar to 'Fourth' displayed in the recurrence editor."
offsetPositionsFourth='Fourth'
i18n-offsetPositionsLast="kendo.recurrenceeditor.offsetPositionsLast|The text similar to 'Last' displayed in the recurrence editor."
offsetPositionsLast='Last'
i18n-weekdaysDay="kendo.recurrenceeditor.weekdaysDay|The text similar to 'Day' displayed in the repeat by section of the monthly recurrence pattern."
weekdaysDay='Day'
i18n-weekdaysWeekday="kendo.recurrenceeditor.weekdaysWeekday|The text similar to 'Weekday' displayed in the repeat by section of the monthly recurrence pattern."
weekdaysWeekday='Weekday'
i18n-weekdaysWeekendday="kendo.recurrenceeditor.weekdaysWeekendday|The text similar to 'Weekend Day' displayed in the repeat by section of the monthly recurrence pattern."
weekdaysWeekendday='Weekend Day'
i18n-endAfter="kendo.recurrenceeditor.endAfter|The text similar to 'After' displayed in the recurrence editor."
endAfter='After'
i18n-endOccurrence="kendo.recurrenceeditor.endOccurrence|The text similar to 'occurrence(s)' displayed in the recurrence editor."
endOccurrence='occurrence(s)'
i18n-endLabel="kendo.recurrenceeditor.endLabel|The text similar to 'End' displayed in the recurrence editor."
endLabel='End'
i18n-endNever="kendo.recurrenceeditor.endNever|The text similar to 'Never' displayed in the recurrence editor."
endNever='Never'
i18n-endOn="kendo.recurrenceeditor.endOn|The text similar to 'On' displayed in the recurrence editor."
endOn='On'
i18n-numericIncrement="kendo.recurrenceeditor.numericIncrement|The title of the 'Increment' button of the NumericTextBoxes displayed in the recurrence editor."
numericIncrement='Increase value'
i18n-numericDecrement="kendo.recurrenceeditor.numericDecrement|The title of the 'Decrement' button of the NumericTextBoxes displayed in the recurrence editor."
numericDecrement='Decrease value'
i18n-dateInputsToday="kendo.recurrenceeditor.dateInputsToday|The title of the 'Today' button in the popup of the DatePickers displayed in the recurrence editor."
dateInputsToday='Today'
i18n-dateInputsToggle="kendo.recurrenceeditor.dateInputsToggle|The title of the 'Toggle' button of the DatePickers displayed in the recurrence editor."
dateInputsToggle='Toggle calendar'
i18n-dateInputsParentViewButton="kendo.recurrenceeditor.dateInputsParentViewButton|The title of the 'Parent View' button in the popup of the DatePickers displayed in the recurrence editor."
dateInputsParentViewButton='Navigate to parent view'
>
</ng-container>
<kendo-recurrence-frequency-editor>
</kendo-recurrence-frequency-editor>
<div class="k-recur-view">
<kendo-recurrence-interval-editor
*ngIf="currentFreq !== 'never'"
[userNumericOptions]="repeatEveryOptions">
</kendo-recurrence-interval-editor>
<kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
</kendo-recurrence-weekday-rule-editor>
<kendo-recurrence-monthly-yearly-editor
*ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
[userNumericOptions]="repeatOnOptions">
</kendo-recurrence-monthly-yearly-editor>
<kendo-recurrence-end-rule-editor
*ngIf="currentFreq !== 'never'"
[userNumericOptions]="endAfterOptions"
[userDatePickerOptions]="endOnOptions">
</kendo-recurrence-end-rule-editor>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: RecurrenceEditorLocalizedMessagesDirective, selector: "[kendoRecurrenceEditorLocalizedMessages]" }, { kind: "component", type: RecurrenceFrequencyEditorComponent, selector: "kendo-recurrence-frequency-editor" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RecurrenceIntervalEditorComponent, selector: "kendo-recurrence-interval-editor", inputs: ["userNumericOptions"] }, { kind: "component", type: RecurrenceWeekdayRuleEditorComponent, selector: "kendo-recurrence-weekday-rule-editor" }, { kind: "component", type: RecurrenceMonthlyYearlyEditorComponent, selector: "kendo-recurrence-monthly-yearly-editor", inputs: ["userNumericOptions"] }, { kind: "component", type: RecurrenceEndRuleEditorComponent, selector: "kendo-recurrence-end-rule-editor", inputs: ["userNumericOptions", "userDatePickerOptions"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecurrenceEditorComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoRecurrenceEditor',
providers: [
RecurrenceLocalizationService,
{
provide: LocalizationService,
useExisting: RecurrenceLocalizationService
},
{
provide: L10N_PREFIX,
useValue: 'kendo.recurrenceeditor'
},
RECURRENCE_VALUE_ACCESSOR,
RecurrenceService
],
selector: 'kendo-recurrence-editor',
template: `
<ng-container kendoRecurrenceEditorLocalizedMessages
i18n-repeat="kendo.recurrenceeditor.repeat|The text similar to 'Repeat' displayed in the recurrence editor."
repeat='Repeat'
i18n-dailyInterval="kendo.recurrenceeditor.dailyInterval|The text similar to 'day(s)' displayed in the recurrence editor."
dailyInterval='day(s)'
i18n-dailyRepeatEvery="kendo.recurrenceeditor.dailyRepeatEvery|The text similar to 'Repeat every' displayed in the recurrence editor."
dailyRepeatEvery='Repeat every'
i18n-weeklyInterval="kendo.recurrenceeditor.weeklyInterval|The text similar to 'week(s)' displayed in the recurrence editor."
weeklyInterval='week(s)'
i18n-weeklyRepeatEvery="kendo.recurrenceeditor.weeklyRepeatEvery|The text similar to 'Repeat every' displayed in the recurrence editor."
weeklyRepeatEvery='Repeat every'
i18n-weeklyRepeatOn="kendo.recurrenceeditor.weeklyRepeatOn|The text similar to 'Repeat on' displayed in the recurrence editor."
weeklyRepeatOn='Repeat on'
i18n-monthlyDay="kendo.recurrenceeditor.monthlyDay|The text similar to 'Day' displayed in the recurrence editor."
monthlyDay='Day'
i18n-monthlyInterval="kendo.recurrenceeditor.monthlyInterval|The text similar to 'month(s)' displayed in the recurrence editor."
monthlyInterval='month(s)'
i18n-monthlyRepeatEvery="kendo.recurrenceeditor.monthlyRepeatEvery|The text similar to 'Repeat every' displayed in the recurrence editor."
monthlyRepeatEvery='Repeat every'
i18n-monthlyRepeatOn="kendo.recurrenceeditor.monthlyRepeatOn|The text similar to 'Repeat on' displayed in the recurrence editor."
monthlyRepeatOn='Repeat on'
i18n-yearlyOf="kendo.recurrenceeditor.yearlyOf|The text similar to 'of' displayed in the recurrence editor."
yearlyOf='of'
i18n-yearlyRepeatEvery="kendo.recurrenceeditor.yearlyRepeatEvery|The text similar to 'Repeat every' displayed in the recurrence editor."
yearlyRepeatEvery='Repeat every'
i18n-yearlyRepeatOn="kendo.recurrenceeditor.yearlyRepeatOn|The text similar to 'Repeat on' displayed in the recurrence editor."
yearlyRepeatOn='Repeat on'
i18n-yearlyInterval="kendo.recurrenceeditor.yearlyInterval|The text similar to 'year(s)' displayed in the recurrence editor."
yearlyInterval='year(s)'
i18n-frequenciesDaily="kendo.recurrenceeditor.frequenciesDaily|The text similar to 'Daily' displayed in the recurrence editor."
frequenciesDaily='Daily'
i18n-frequenciesMonthly="kendo.recurrenceeditor.frequenciesMonthly|The text similar to 'Monthly' displayed in the recurrence editor."
frequenciesMonthly='Monthly'
i18n-frequenciesNever="kendo.recurrenceeditor.frequenciesNever|The text similar to 'Never' displayed in the recurrence editor."
frequenciesNever='Never'
i18n-frequenciesWeekly="kendo.recurrenceeditor.frequenciesWeekly|The text similar to 'Weekly' displayed in the recurrence editor."
frequenciesWeekly='Weekly'
i18n-frequenciesYearly="kendo.recurrenceeditor.frequenciesYearly|The text similar to 'Yearly' displayed in the recurrence editor."
frequenciesYearly='Yearly'
i18n-offsetPositionsFirst="kendo.recurrenceeditor.offsetPositionsFirst|The text similar to 'First' displayed in the recurrence editor."
offsetPositionsFirst='First'
i18n-offsetPositionsSecond="kendo.recurrenceeditor.offsetPositionsSecond|The text similar to 'Second' displayed in the recurrence editor."
offsetPositionsSecond='Second'
i18n-offsetPositionsThird="kendo.recurrenceeditor.offsetPositionsThird|The text similar to 'Third' displayed in the recurrence editor."
offsetPositionsThird='Third'
i18n-offsetPositionsFourth="kendo.recurrenceeditor.offsetPositionsFourth|The text similar to 'Fourth' displayed in the recurrence editor."
offsetPositionsFourth='Fourth'
i18n-offsetPositionsLast="kendo.recurrenceeditor.offsetPositionsLast|The text similar to 'Last' displayed in the recurrence editor."
offsetPositionsLast='Last'
i18n-weekdaysDay="kendo.recurrenceeditor.weekdaysDay|The text similar to 'Day' displayed in the repeat by section of the monthly recurrence pattern."
weekdaysDay='Day'
i18n-weekdaysWeekday="kendo.recurrenceeditor.weekdaysWeekday|The text similar to 'Weekday' displayed in the repeat by section of the monthly recurrence pattern."
weekdaysWeekday='Weekday'
i18n-weekdaysWeekendday="kendo.recurrenceeditor.weekdaysWeekendday|The text similar to 'Weekend Day' displayed in the repeat by section of the monthly recurrence pattern."
weekdaysWeekendday='Weekend Day'
i18n-endAfter="kendo.recurrenceeditor.endAfter|The text similar to 'After' displayed in the recurrence editor."
endAfter='After'
i18n-endOccurrence="kendo.recurrenceeditor.endOccurrence|The text similar to 'occurrence(s)' displayed in the recurrence editor."
endOccurrence='occurrence(s)'
i18n-endLabel="kendo.recurrenceeditor.endLabel|The text similar to 'End' displayed in the recurrence editor."
endLabel='End'
i18n-endNever="kendo.recurrenceeditor.endNever|The text similar to 'Never' displayed in the recurrence editor."
endNever='Never'
i18n-endOn="kendo.recurrenceeditor.endOn|The text similar to 'On' displayed in the recurrence editor."
endOn='On'
i18n-numericIncrement="kendo.recurrenceeditor.numericIncrement|The title of the 'Increment' button of the NumericTextBoxes displayed in the recurrence editor."
numericIncrement='Increase value'
i18n-numericDecrement="kendo.recurrenceeditor.numericDecrement|The title of the 'Decrement' button of the NumericTextBoxes displayed in the recurrence editor."
numericDecrement='Decrease value'
i18n-dateInputsToday="kendo.recurrenceeditor.dateInputsToday|The title of the 'Today' button in the popup of the DatePickers displayed in the recurrence editor."
dateInputsToday='Today'
i18n-dateInputsToggle="kendo.recurrenceeditor.dateInputsToggle|The title of the 'Toggle' button of the DatePickers displayed in the recurrence editor."
dateInputsToggle='Toggle calendar'
i18n-dateInputsParentViewButton="kendo.recurrenceeditor.dateInputsParentViewButton|The title of the 'Parent View' button in the popup of the DatePickers displayed in the recurrence editor."
dateInputsParentViewButton='Navigate to parent view'
>
</ng-container>
<kendo-recurrence-frequency-editor>
</kendo-recurrence-frequency-editor>
<div class="k-recur-view">
<kendo-recurrence-interval-editor
*ngIf="currentFreq !== 'never'"
[userNumericOptions]="repeatEveryOptions">
</kendo-recurrence-interval-editor>
<kendo-recurrence-weekday-rule-editor *ngIf="currentFreq === 'weekly'">
</kendo-recurrence-weekday-rule-editor>
<kendo-recurrence-monthly-yearly-editor
*ngIf="currentFreq === 'monthly' || currentFreq === 'yearly'"
[userNumericOptions]="repeatOnOptions">
</kendo-recurrence-monthly-yearly-editor>
<kendo-recurrence-end-rule-editor
*ngIf="currentFreq !== 'never'"
[userNumericOptions]="endAfterOptions"
[userDatePickerOptions]="endOnOptions">
</kendo-recurrence-end-rule-editor>
</div>
`,
standalone: true,
imports: [RecurrenceEditorLocalizedMessagesDirective, RecurrenceFrequencyEditorComponent, NgIf, RecurrenceIntervalEditorComponent, RecurrenceWeekdayRuleEditorComponent, RecurrenceMonthlyYearlyEditorComponent, RecurrenceEndRuleEditorComponent]
}]
}], ctorParameters: function () { return [{ type: i1.RecurrenceService }, { type: i2.IntlService }]; }, propDecorators: { cssClass: [{
type: HostBinding,
args: ['class.k-recurrence-editor']
}], start: [{
type: Input
}], timezone: [{
type: Input
}], weekStart: [{
type: Input
}], repeatEveryOptions: [{
type: Input
}], endAfterOptions: [{
type: Input
}], repeatOnOptions: [{
type: Input
}], endOnOptions: [{
type: Input
}], valueChange: [{
type: Output
}] } });