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

Static code analysis tools integration with latest Angular version
Publish date: 2022-02-25 | Comments: 1

Tag: Angular

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

Tag: Angular

How to reload Angular component without refreshing page?
Publish date: 2022-03-02 | Comments: 1

Tag: Angular

Rename key inside Object {}
Publish date: 2022-03-05 | Comments: 2

Tag: Angular

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

Tag: Angular