Disable Weekends in Calender

[Dhinesh]

Hi,

I am new to the Kendo U, and I am trying to build the app using UI calendar with Angular JS. Please help me with the solution.

 

Is it possible to disable the weekends of the particular month. For example, I am using april month. In here I need to disable the weekends and some days also, like 15 and 16 dates. Please provide the solution on how to achieve it. sample given below.

 

Your solution will help me with the product.

http://dojo.telerik.com/oMoDU/4 

 

Regards,

Dhinesh R

[Dhinesh]

Instead of disabling, can  u please highlight the dates?

[Dhinesh]

Any update?

[Viktor Tachev]

Hello,

If you would like to disable some of the dates in the Calendar widget you can use the disableDates setting.

For customizing the appearance of specific dates you can use month template. Check out the updated dojo below that outlines the approach:

• http://dojo.telerik.com/oMoDU/5

Regards,
Viktor Tachev
Telerik by Progress

[Dhinesh]

In this I would like to highlight, only sat and sundays alone, as u did for disable disableDates: ["sa", "su"]. Is it possible? and also additional to this, I would like to highlight some other dates also.. example 16 date. Please provide with the solution

[Dhinesh]

and also please explain, what are the things in the data object.

 <div class="#= data.value < 10 ? 'exhibition' : 'party' #">
    #= data.value #
      </div>

As i didnt find any document relative to this

[Dhinesh]

Else, I saw that we are using functions to validate the values. Check the below example of knockout.

http://jsfiddle.net/rniemeyer/bfycstr4/

In there, I can see that we can use inArray as function to link between html month-content attribute and the script. Please let me know how to use it in Angular JS. I tried the same for angular but it doesnt work well. 

http://dojo.telerik.com/OmUge/7

Please tell me how can I use the inArray as custom function, instead of $.inArray

 

Regards,

Ravi

[Viktor Tachev]

Hi Ravi,

If you would like to customize the way some of the dates are displayed you need to use templates. In the template you can add your custom JavaScript logic and apply the relevant styles where necessary. Note that the code in month.content will be executed for each ray in the Calendar.

The data object in the template is holding the data relevant for the current cell. Check out the screenshot below for reference. 

• https://www.screencast.com/t/CBjwHlXR

As for calling a method in the template. You can move the function to the global scope and the logic in it will be executed as expected.

• http://dojo.telerik.com/OmUge/12

Regards,
Viktor Tachev
Telerik by Progress

[Dhinesh]

Great Solution Victor. Thanks. Let me check out the same with the solution provided.