Angular Управление календарем Kendo - изменение поведения кнопки «Сегодня» - PullRequest
0 голосов
/ 06 апреля 2020

У меня есть элемент управления календаря 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')}` : '';
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...