Set firstday on calendar

[fingate]

Hello,

I am using all of Date Inputs, Native Components, Knedo UI for Vue.

In My project, I want to set Sunday, Monday , Saturday like first day in week according to the variable. How can I do that?

 

Thanks for reply.

[Konstantin Dikov]

Hello Fingate,

The first day in the week will be determined by the selected locale and the values within the "weekData" object for it. If you want to change the standard for the first date you can modify the weekData object before loading it. Here is an example demonstrating you can change the "US" locale first day of week to "Monday":

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

Please note that the DateInput components do not provide a property for changing this per component.

If further questions arise, please do not hesitate to contact us again.

 

Regards,
Konstantin Dikov
Progress Telerik

[fingate]

Thanks to you, I solved the problem!

[fingate]

I have one more 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.

[Konstantin Dikov]

Hi,

The easiest way would be to use that title value as CSS selector and target the 'Saturday' and 'Sunday' strings:

<style>
.k-calendar-td[title^='Saturday'] {
  background-color: lightblue;
}
.k-calendar-td[title^='Sunday'] {
  background-color: red;
}
</style>

Another option would be to customize the cells and add conditional styling based on the date:

• https://www.telerik.com/kendo-vue-ui/components/dateinputs/calendar/custom-rendering/#toc-modifying-the-cells