Distinguish Saturday from Sunday.

[fingate]

Hi!

I have a question.

I would like to mark Saturday in blue and Sunday in red.
The only information I have is the 'k-weekend' class that doesn't seem to distinguish Saturday from Sunday.

Is there a simple way to distinguish it?

 

 

I don't want to mess with props if possible.

 

 

 

 

Thanks for reply

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Vessy]

Hello, fingate,

You are right that the day groups in the calendar does not have their specific classnames, but you can easily style all sundays and Saturdays by accessing the 6th and 7th child of the `.k-calendar-tbody tr` elements.

For example, you can use a similar selector (note that it will style also the empty cells at the bottom of the month):

• https://stackblitz.com/edit/pctiew?file=src%2Fmain.vue 

.k-calendar-tbody td:nth-child(6) {
  background-color: skyblue;
}
.k-calendar-tbody td:nth-child(7) {
  background-color: pink;
}

I hope this suggestion will be helpful for you .

Regards,
Vessy
Progress Telerik

[fingate]

Thanks for reply.
It's a simple method I want !

[Vessy]

You are welcome, I am glad that the suggested approach is working for you :)