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