@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.
132 lines (131 loc) • 6.42 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, ViewChildren, QueryList } from '@angular/core';
import { capitalize, isPresent } from '../../common/util';
import { RecurrenceService } from './recurrence.service';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Button, ButtonComponent, ButtonGroupComponent } from '@progress/kendo-angular-buttons';
import { NgFor } from '@angular/common';
import { LabelComponent } from '@progress/kendo-angular-label';
import * as i0 from "@angular/core";
import * as i1 from "./recurrence.service";
import * as i2 from "@progress/kendo-angular-l10n";
/**
* @hidden
*/
export class RecurrenceWeekdayRuleEditorComponent {
recurrence;
localization;
weekDayButtons;
weekDays;
selected = [];
constructor(recurrence, localization) {
this.recurrence = recurrence;
this.localization = localization;
this.weekDays = this.recurrence.weekDays;
this.setSelectedDays();
}
setSelectedDays() {
for (let i = 0; i < 7; i++) {
this.selected[i] = false;
}
if (isPresent(this.rrule.byWeekDay)) {
this.rrule.byWeekDay.forEach((rule) => {
this.selected[rule.day] = true;
});
}
}
onSelectedChange(isSelected, day) {
this.selected[day] = isSelected;
this.recurrence.setWeekDays(this.serializeToWeekDayRuleArray(this.selected));
}
isSelected(day) {
return this.selected[day.value];
}
serializeToWeekDayRuleArray(arr) {
const selectedValues = [];
arr.forEach((isSelected, idx) => {
if (isSelected) {
selectedValues.push({ day: idx, offset: 0 });
}
});
return selectedValues.length > 0 ? selectedValues : null;
}
get rrule() {
return this.recurrence.rrule;
}
capitalize(day) {
return capitalize(day);
}
textFor(key) {
return this.localization.get(key);
}
onWeeklyRepeatOnClick() {
const selected = this.weekDayButtons.toArray().find(r => r.selected);
if (selected) {
selected.focus();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, deps: [{ token: i1.RecurrenceService }, { token: i2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RecurrenceWeekdayRuleEditorComponent, isStandalone: true, selector: "kendo-recurrence-weekday-rule-editor", viewQueries: [{ propertyName: "weekDayButtons", predicate: Button, descendants: true }], ngImport: i0, template: `
<div class="k-form-field">
<kendo-label
[text]="textFor('weeklyRepeatOn')"
labelCssClass="k-form-label"
(click)="onWeeklyRepeatOnClick()"
></kendo-label>
<div class="k-form-field-wrap">
<kendo-buttongroup
class="k-button-group-solid"
width="100%"
selection="multiple"
>
<button
*ngFor='let day of weekDays'
kendoButton
[toggleable]="true"
[selected]="isSelected(day)"
(selectedChange)="onSelectedChange($event, day.value)"
>{{ capitalize(day.text) }}</button>
</kendo-buttongroup>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "component", type: LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecurrenceWeekdayRuleEditorComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-recurrence-weekday-rule-editor',
template: `
<div class="k-form-field">
<kendo-label
[text]="textFor('weeklyRepeatOn')"
labelCssClass="k-form-label"
(click)="onWeeklyRepeatOnClick()"
></kendo-label>
<div class="k-form-field-wrap">
<kendo-buttongroup
class="k-button-group-solid"
width="100%"
selection="multiple"
>
<button
*ngFor='let day of weekDays'
kendoButton
[toggleable]="true"
[selected]="isSelected(day)"
(selectedChange)="onSelectedChange($event, day.value)"
>{{ capitalize(day.text) }}</button>
</kendo-buttongroup>
</div>
</div>
`,
standalone: true,
imports: [LabelComponent, ButtonGroupComponent, NgFor, ButtonComponent]
}]
}], ctorParameters: function () { return [{ type: i1.RecurrenceService }, { type: i2.LocalizationService }]; }, propDecorators: { weekDayButtons: [{
type: ViewChildren,
args: [Button]
}] } });