Disable Weekends in Calender

9 posts, 1 answers
  1. Dhinesh
    Dhinesh avatar
    7 posts
    Member since:
    Apr 2017

    Posted 25 Apr Link to this post

    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

  2. Dhinesh
    Dhinesh avatar
    7 posts
    Member since:
    Apr 2017

    Posted 25 Apr in reply to Dhinesh Link to this post

    Instead of disabling, can  u please highlight the dates?
  3. Dhinesh
    Dhinesh avatar
    7 posts
    Member since:
    Apr 2017

    Posted 26 Apr Link to this post

    Any update?
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1728 posts

    Posted 26 Apr Link to this post

    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.
  5. Dhinesh
    Dhinesh avatar
    7 posts
    Member since:
    Apr 2017

    Posted 26 Apr in reply to Viktor Tachev Link to this post

    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
  6. Dhinesh
    Dhinesh avatar
    7 posts
    Member since:
    Apr 2017

    Posted 26 Apr in reply to Dhinesh Link to this post

    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

  7. Dhinesh
    Dhinesh avatar
    7 posts
    Member since:
    Apr 2017

    Posted 27 Apr Link to this post

    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

  8. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    1728 posts

    Posted 27 Apr Link to this post

    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.
  9. Dhinesh
    Dhinesh avatar
    7 posts
    Member since:
    Apr 2017

    Posted 27 Apr in reply to Viktor Tachev Link to this post

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