Принудительно нажимать на клики по умолчанию - AngularCalendar - PullRequest
Новая
       33

Принудительно нажимать на клики по умолчанию - AngularCalendar

0 голосов
/ 21 октября 2018

Я использую 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);

}

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

Хорошо, после того, как я использовал в html эту строку: 

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

это выглядит почти работающим, потому что моя дата выбрана, но каким-то образом, даже если у нее есть класс "cal-day-selected" вcss, цвет его фона не изменился:

my css: 

.cal-day-selected,.cal-day-selected:hover 
{
background-color: rgba($light-green-color-rgb, 0.7) !important;
}
0 голосов
/ 21 октября 2018

Вы можете немного изменить компонент из примера: 

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