强制 dayClick 默认 - AngularCalendar答案

【问题标题】：Force dayClick on default - AngularCalendar强制 dayClick 默认 - AngularCalendar
【发布时间】：2018-10-21 13:30:49
【问题描述】：

我正在使用AngularCalendar，尤其是可点击的日子功能。我需要以编程方式强制默认设置 dayClicked，例如当用户打开带有日历的页面时，他必须看到今天被选中。我尝试构建新的 CalendarMonthViewDay，但没有成功。这是我在 dayClickedEvent 上的功能：

如何创建新的 CalendarMonthViewDay 以便 Angular 可以看到它并在选定日期的情况下呈现页面？

protected dayClicked(day: CalendarMonthViewDay): void {
    // this.resetHoursInputs();
    console.log(day);

    if (day.isPast) {
      return `enter code here`;
    }
    if (!this.multipleSelect) {
      this.clearSelectedDays();

    }
    this.selectedMonthViewDay = day;
    const selectedDateTime = this.selectedMonthViewDay.date.getTime();
    const dateIndex = this.selectedDays.findIndex(
      selectedDay => selectedDay.date.getTime() === selectedDateTime,
    );
    if (dateIndex > -1) {
      delete this.selectedMonthViewDay.cssClass;
      this.selectedDays.splice(dateIndex, 1);
    }
    this.selectedDays.push(this.selectedMonthViewDay);
    day.cssClass = 'cal-day-selected';
    this.selectedMonthViewDay = day;
    // }

    if (!this.multipleSelect) {
      // this.updateDoctorAppointmentsList();
      this.getSelectedDayAppointments();
      // console.log();
    }
    console.log(day);

}

【问题讨论】：

标签： angular calendar click days angular-calendar

【解决方案1】：

您可以从示例中稍微更改组件：

import { Component, AfterViewChecked, ViewChild, ChangeDetectorRef } from '@angular/core';
import { CalendarEvent } from 'angular-calendar';

@Component({
  selector: 'mwl-demo-component',
  templateUrl: 'template.html'
})
export class DemoComponent implements AfterViewChecked {

  view: string = 'month';
  viewDate: Date = new Date();
  events: CalendarEvent[] = [];
  clickedDate: Date;

  @ViewChild('monthView') monthView;

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewChecked() {
    const emittedValue = {
      day: {
        badgeTotal: 0,
        date: new Date(),
        events: [],
        inMonth: true,
        isFuture: false,
        isPast: false,
        isToday: true,
        isWeekend: false,
      },
    };
    this.monthView.dayClicked.emit(emittedValue);
    this.cdr.detectChanges();
  }

}

别忘了将变量 monthView 添加到 mwl-calendar-month-view ：

<mwl-calendar-month-view
  #monthView
  *ngSwitchCase="'month'"
  [viewDate]="viewDate"
  [events]="events"
  (dayClicked)="clickedDate = $event.day.date">
</mwl-calendar-month-view>

【讨论】：

好的，在我在 html 中使用这一行之后： (dayClicked)="dayClicked($event.day)" 它看起来几乎可以工作，因为我选择了日期，但不知何故，即使它有css中的'cal-day-selected'类，它的背景颜色没有改变：我的css：.cal-day-selected，.cal-day-selected：hover { background-color：rgba（$light-green-color -rgb，0.7）！重要； }

【解决方案2】：

好的，在我在 html 中使用这一行之后：

(dayClicked)="dayClicked($event.day)"

它看起来几乎可以工作，因为我选择了日期，但不知何故，即使它在 css 中有“cal-day-selected”类，它的背景颜色也没有改变：

我的CSS：

.cal-day-selected,.cal-day-selected:hover 
{
background-color: rgba($light-green-color-rgb, 0.7) !important;
}

【讨论】：