Search code examples
angularangular-calendar

How to select a day in Angular Calendar package

I am using Angular Calendar (see demos here https://mattlewis92.github.io/angular-calendar/#/kitchen-sink)

And I need to apply a different class to a day (or more) that I select. So, if I click on a day (or more), I need them to be pink or something.

I have done something similar with today cell

const today_cell: 'today-cell' = 'today-cell';

export class MonthCalendarComponent implements OnInit {

  todayCssClass: string = today_cell;

 beforeMonthViewRender({ body }: { body: CalendarMonthViewDay[] }): void {
       body.forEach(day => {
         if (day.isToday === true) {
            day.cssClass = this.todayCssClass;
          }
     }
}

but I am not using click event. How can I do it?

Solution

  • There is a live demo in the Component you linked to, doing exactly what you need to do. Selecting multiple days and coloring them in pink, with full code and as mentioned a demo: https://mattlewis92.github.io/angular-calendar/#/selectable-period

    There's a predefined css class .cal-day-selected which is used to color the selected days and in the demo the selected days are inside an array selectedDays: any = [];