Force dayClick on default - AngularCalendar

Question

I'm using AngularCalendar, especially the clickable days functionality. I need to force programatically dayClicked on default, e.g. when user opens page with calendar he must see today selected. I've tried to construct new CalendarMonthViewDay, but no success. Here's my function on dayClickedEvent:

How to create new CalendarMonthViewDay so that Angular would see it and render page with chosen day selected?

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

You can change the component from the example little bit:

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();
  }

}

And don't forget to add variable monthView to 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

Ok, after i used in html this line:

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

it looks like almost working, because my date is chosen, but somehow, even if it has 'cal-day-selected' class in css, its background color hasn't changed:

my css:

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