Как прослушать события mat-calendar-header - PullRequest
Новая
       6

Как прослушать события mat-calendar-header

0 голосов
/ 20 марта 2019

Я использую Сатурн-сборщик дат и использую Сат-календарь для реализации выбора диапазонов дат.Теперь пользователи могут выбирать только те месяцы, в которые определенный другой объект (временная карта) еще не имеет временной карты, которая позволяет добавлять новую запись.

У нас есть реализация, которая отключает все эти месяцы насобытие (щелчка), которое означает, что оно также запускается для многолетнего представления и представления месяца, которое иногда блокирует выбор (см. рисунок).

enter image description here

в нашем html-коде мы имеем следующее: 

<sat-calendar
    #calendar
    [dateFilter]="filterdate"
    [rangeMode]="true"
    [minDate]="minDate"
    [maxDate]="maxDate"
    orderPeriodLabel="month"
    (dateRangesChange)="onDateRangesChange(calendar, $event)"
    (monthSelected)="functionName($event)"
    (selectedChange)="functionName($event)"
    (click)="onMonthChange(calendar)"
  ></sat-calendar>

и наш компонент: 

import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
import { DateAdapter, SatCalendar, SatDatepickerRangeValue } from 'saturn-datepicker';
// left out imports    
@Component({
  selector: 'date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
})
export class DatePickerComponent implements OnInit, OnChanges {
  minDate: Date;
  maxDate: Date;

  filterdate: any;

  @Input() placement: Placement;
  @Input() placementTimesheets: PlacementTimesheet[];
  @Output() readonly updateDateRange: EventEmitter<SatDatepickerRangeValue<Date>> = new EventEmitter();
  @ViewChild('calendar') calendar: SatCalendar<Date>;

  range?: SatDatepickerRangeValue<Date>;
  constructor(private readonly dateAdapter: DateAdapter<Date>) {}

  ngOnInit(): void {
    this.dateAdapter.getFirstDayOfWeek = () => 1;
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.placement) {
      if (this.placement) {
        this.minDate = new Date(this.placement.startDate);
        this.maxDate = new Date(this.placement.endDate);
      }
    }

    if (changes.placementTimesheets) {
      if (this.placementTimesheets) {
        this.onMonthChange(this.calendar);
      }
    }
  }

  functionName(date) {
    console.log(date);
  }

  onMonthChange(calendar: SatCalendar<Date>): void {
    const activeTimesheetPlacement = this.getActivePlacementTimesheet(calendar);
    const enabledPlacementStatus = [0, 1 , 2];

    if (typeof activeTimesheetPlacement !== 'undefined' && !enabledPlacementStatus.includes(activeTimesheetPlacement.status)) {
      this.setMonthEnabled(false);
    } else {
      this.setMonthEnabled(true);
    }
  }

  onDateRangesChange(calendar: SatCalendar<Date>, range: SatDatepickerRangeValue<Date>): void {
    calendar.beginDate = range.begin;
    calendar.endDate = range.end;
    this.range = range;
    this.updateDateRange.emit(this.range);
  }

  private setMonthEnabled(isEnabled: boolean): void {
    this.filterdate = (d: Date): boolean => isEnabled;
  }

  private getActivePlacementTimesheet(calendar: SatCalendar<Date>): PlacementTimesheet {
    // get current month (0-11)
    let activeMonth = new Date().getMonth();
    let activeYear = new Date().getFullYear();

    if (calendar.activeDate) {
      activeMonth = new Date(calendar.activeDate).getMonth();
      activeYear = new Date(calendar.activeDate).getFullYear();
    }

    // Add 1 to make months 1-12
    activeMonth = activeMonth + 1;

    return this.placementTimesheets.find(x => x.year === activeYear && x.month === activeMonth);
  }
}

Эти события находятся в реализации заголовка Mat-calendar-header.Есть ли способ прослушать эти события с помощью выходного устройства в спутниковом календаре?Потому что (щелчок) слишком широк для моего вкуса.В моем шаблоне я использую только sat-calendar (или mat-calendar), но вижу, что по умолчанию используется заголовок mat-calendar-header.

Или ... есть ли лучший способ отфильтровать эти значения из средства выбора даты, чтобы отключить их, а также сделать возможным выбор месяцев и лет в многолетнем и месячном представлении?

...