Set firstday on calendar

1 Answer 63 Views
Calendar DateInput DatePicker
fingate
Top achievements
Rank 1
Iron
fingate asked on 29 Feb 2024, 12:51 AM

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.

1 Answer, 1 is accepted

Sort by
1
Accepted
Konstantin Dikov
Telerik team
answered on 01 Mar 2024, 06:34 AM

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":

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources

fingate
Top achievements
Rank 1
Iron
commented on 03 Mar 2024, 04:41 AM

Thanks to you, I solved the problem!
fingate
Top achievements
Rank 1
Iron
commented on 03 Mar 2024, 05:01 AM

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
Telerik team
commented on 06 Mar 2024, 09:43 AM

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:

 

Tags
Calendar DateInput DatePicker
Asked by
fingate
Top achievements
Rank 1
Iron
Answers by
Konstantin Dikov
Telerik team
Share this question
or