3

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?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
user2004
  • 1,783
  • 4
  • 15
  • 42
  • Do you want to make the days selectable, or just apply different formatting on each day you clicked once, without doing anything with those days afterwards? – Agash Thamo. Aug 10 '18 at 08:23
  • After I selected some days, I will send them to database, so I need to save them – user2004 Aug 10 '18 at 10:09

1 Answers1

2

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 = [];

Agash Thamo.
  • 748
  • 6
  • 18