user image

Shilpa
Published in : 2022-03-11

How to bind Weekends off to my kendo calendar in Angular?

Angular

I am using kendo calendar  datepicker in angular component. Is there any way to disable or hide weekends dates (Saturday & Sunday)?

<kendo-datepicker id="workingDays" [(ngModel)]="workingDay" format="dd MMMM yyyy"></kendo-datepicker>

Can I get USA calendar with Kendo library to see the public holidays programmatically? and disable those date from the showing on calendar?

** URGENT **

I need to fix this issue ASAP! Your help is valuable for me.

Comments

Rakshit Date : 2022-03-18

Best answers

34

Best answers

34

To disable weekends (Saturday and Sunday) you can use below code.

Add HTML kendo datepicker code:

<kendo-datepicker [(ngModel)]="value" [disabledDates]="disabledWeekendDates" > </kendo-datepicker>

Add your .ts code as below,

public disabledWeekendDates = (date: Date): boolean => { //date.getDay() will return day for each days rendering on your calendar / datepicker. return date.getDay() == 0 || date.getDay() == 6 ? true : false; };

Live Demo | Runnable Code

Hope the given information will be helpful for you.

Shilpa Date : 2022-03-22

Best answers

10

Best answers

10

Thanks, for the quick response, stackblitz demo looks good as per my requirements.

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

How to call event handler onload for Angular application?
Publish date: 2022-03-02 | Comments: 2

Tag: Angular

Angular - PrimeNG charts adding colors for each legends dynamically
Publish date: 2022-02-27 | Comments: 1

Tag: Angular

In Angular project, RxJS isStopped is deprecated! What is the alternative?
Publish date: 2022-02-28 | Comments: 1

Tag: Angular

Angular: HTML anchor tag with #idref issue
Publish date: 2022-03-01 | Comments: 2

Tag: Angular

How to translate Angular application easily?
Publish date: 2022-03-03 | Comments: 2

Tag: Angular