强制日点击默认 - AngularCalendar

Question

我正在使用 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);

}

Answer 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>

Answer 2

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

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

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

我的css:

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

强制日点击默认 - AngularCalendar

Force dayClick on default - AngularCalendar

calendar

click

days

angular

angular-calendar