0

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

}
4

2 回答 2

0

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

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>
于 2018-10-21T14:31:38.280 回答
0

好的，在我在 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;
}
于 2018-10-21T15:25:46.553 回答