Proper way to highlight days on the calendar?

[Matt]

I can use the value but then when I click on the calendar it highlights only the day that was clicked... I don't want clicking on a value to highlight it.. I want the collection of highlighted dates to be left alone..  How would I do this  ? And how can I control the css for example.. Make the dates in the collection highlight with a blue font ..

 

<kendo-calendar (valueChange)="onChangeCalendarFilter($event)" [value]="trainingDates"

                       

selection="multiple"></kendo-calendar>

 

 

  //create array of date ranges from course dates

            for (let i = 0; i < this.trainingRequests.length; i++) {

                let startDate: Date = new Date(this.trainingRequests[i].sessionStartDate);

                let endDate: Date = new Date(this.trainingRequests[i].sessionEndDate);

                //create array of dates between start and end date

                for (var a = [], d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {

                    this.trainingDates.push(new Date(d));

                }

            }

[Yanmario]

Hi Matt,

Thank you for the provided code snippet.

The value property of the calendar supports a single JavaScript Date or array of dates when the selection mode is set to `multiple`. Please check the following example demonstrating pre-selected dates inside the Calendar component:

https://stackblitz.com/edit/angular-r9ja3x-87chl4?file=app%2Fapp.component.ts

As for the styling the following selector can be used:

.k-calendar .k-calendar-td.k-state-selected .k-link {
    background-color: blue; }

also demonstrated in the above example.

I hope this helps.

Regards,
Yanmario
Progress Telerik