У меня есть элемент управления календаря Kendo, который передает информацию о дате некоторым другим компонентам на моей странице. По сути, мне нужно немного изменить поведение кнопки «Сегодня» в календаре, но я не нашел никакого способа сделать это (я не нашел ничего в Kendo API для этого - никаких событий или чего-либо еще) .
StackBlitz
Я не хочу изменять шаблон самого элемента управления Kendo, если это вообще возможно. У меня sh была переменная шаблона на кнопке, но я просто вижу .k-today
css класс.
Компонент / Шаблон:
import { Component, ViewEncapsulation, ElementRef } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';
import { CalendarView } from '@progress/kendo-angular-dateinputs';
@Component({
encapsulation: ViewEncapsulation.None,
selector: 'my-app',
template: `
<div class="container-fluid">
<div class="row">
<kendo-calendar
(blur)="onBlur()"
(focus)="onFocus()"
(activeViewChange)="onActiveViewChange($event)"
(activeViewDateChange)="onActiveDateChange($event)"
(valueChange)="onChange($event)"
>
</kendo-calendar>
<event-log title="Event log" [events]="events">
</event-log>
</div>
</div>
`
})
export class AppComponent {
public events: string[] = [];
constructor(private intl: IntlService, private elementRef: ElementRef) {}
public onActiveDateChange(value: Date): void {
this.log('activeDateChange', value);
}
public onActiveViewChange(view: CalendarView): void {
this.events = [`activeViewChanged: ${view}`].concat(this.events);
}
public onBlur(): void {
this.log('blur');
}
public onFocus(): void {
this.log('focus');
}
public onChange(value: Date): void {
this.log('change', value);
}
private log(event: string, value?: Date): void {
this.events = [`${event}${this.formatValue(value)}`].concat(this.events);
}
private formatValue(value?: Date): string {
return value ? ` - ${this.intl.formatDate(value, 'd')}` : '';
}
}