How to disable weekends and holidays

3 posts, 0 answers
  1. Kriztine
    Kriztine avatar
    1 posts
    Member since:
    May 2015

    Posted 30 Jul 2015 Link to this post

    I want to disable all Saturdays, Sundays and holidays. Please help me how to do that.
  2. eo
    eo avatar
    27 posts
    Member since:
    Jul 2015

    Posted 31 Jul 2015 Link to this post

    Hello Kriztine,

     Weekend days on the DatePicker have the .k-weekend class associated to them so a ways to disable them would be:

    .kendoDatePicker({
        open: function() { $('.k-weekend a').bind('click', function() { return false; }); }
    });

     Now, the holidays are not different to other dates because they vary depending on the country, but particular dates can be disabled with a little coding. Here's an example of a DatePicker with the last three days disabled:

    <!DOCTYPE html>
    <html>
    <head>
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <meta charset=utf-8 />
    <title>JS Bin</title>
    </head>
    <body>
      <input id="datepicker" value="10/10/2011" style="width:150px;" />
      <script>
       $(document).ready(function() {
            disabledDays = [
              +new Date("7/29/2015"),
              +new Date("7/30/2015"),
              +new Date("7/31/2015"),
            ];
        
            var p = $("#datepicker").kendoDatePicker({
                value: new Date(), //setting the value to "today"
                dates: disabledDays, //passing the disabledDays array to the template
                  month: {
                  // template for dates in month view
                  content: '# if ($.inArray(+data.date, data.dates) != -1) { #' +  
                  '<div class="disabledDay">#= data.value #</div>' +
                  '# } else { #' +
                  '#= data.value #' +
                  '# } #'
                  },
               
                open: function(e){
                  $(".disabledDay").parent().removeClass("k-link") //removing this class makes the day unselectable
                  $(".disabledDay").parent().removeAttr("href") //this removes the hyperlink styling
                },
            }).data("kendoDatePicker");
       });
         
         
     
      </script>
       
      <style>
        .disabledDay{
          /* adding some CSS to match the normal days styling */
          display: block;
          overflow: hidden;
          min-height: 22px;
          line-height: 22px;
          padding: 0 .45em 0 .1em;
          cursor:default;
          opacity: 0.5;
        }
        </style>
    </body>
    </html>

    I hope this helps.

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 03 Aug 2015 Link to this post

    Hi Guys,

    @Eo
    Thank you for sharing this approach with our community.

    @Kriztine
    You can also check these resources:
    http://demos.telerik.com/aspnet-mvc/datepicker/template
    http://jsbin.com/eyUdeni/2/edit?html,js,output

    Hope this helps.


    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top