This is a migrated thread and some comments may be shown as answers.

Disable Weekends in Calender

8 Answers 640 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Dhinesh
Top achievements
Rank 1
Dhinesh asked on 25 Apr 2017, 06:58 AM

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

8 Answers, 1 is accepted

Sort by
0
Dhinesh
Top achievements
Rank 1
answered on 25 Apr 2017, 08:43 AM
Instead of disabling, can  u please highlight the dates?
0
Dhinesh
Top achievements
Rank 1
answered on 26 Apr 2017, 08:45 AM
Any update?
0
Viktor Tachev
Telerik team
answered on 26 Apr 2017, 01:37 PM
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:



Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dhinesh
Top achievements
Rank 1
answered on 26 Apr 2017, 01:44 PM
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
0
Dhinesh
Top achievements
Rank 1
answered on 26 Apr 2017, 01:48 PM

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

0
Dhinesh
Top achievements
Rank 1
answered on 27 Apr 2017, 05:44 AM

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

0
Accepted
Viktor Tachev
Telerik team
answered on 27 Apr 2017, 12:53 PM
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. 


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.



Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dhinesh
Top achievements
Rank 1
answered on 27 Apr 2017, 01:16 PM
Great Solution Victor. Thanks. Let me check out the same with the solution provided.
Tags
Calendar
Asked by
Dhinesh
Top achievements
Rank 1
Answers by
Dhinesh
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or