How to disable weekends and holidays

8 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.
  3. 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.

  5. Eyup
    Admin
    Eyup avatar
    3940 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
  7. Dan
    Dan avatar
    161 posts
    Member since:
    Nov 2017

    Posted 20 Mar 2019 in reply to Eyup Link to this post

    Hello,

    I have to implement the same thing. Has this been improved in the new telerik version (2019.1.220)? The possible way I can think of with the current version of telerik would be to use a function on disabledDates, but that would mean that I would have to calculate myself the week-end days and I would want for the telerik to do this.

  8.
  9. Eyup
    Admin
    Eyup avatar
    3940 posts

    Posted 21 Mar 2019 Link to this post

    Hello Dan,

    Yes, you can achieve this requirement using the following property:
    .DisableDates(DayOfWeek.Saturday, DayOfWeek.Sunday)

    You can find a live sample here for demonstration:
    https://demos.telerik.com/aspnet-mvc/datepicker/disable-dates

    I hope this will prove helpful.

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Dan
    Dan avatar
    161 posts
    Member since:
    Nov 2017

    Posted 21 Mar 2019 in reply to Eyup Link to this post

    Hi Eyup,

    Maybe you did not understood the original question. The title says "weekends AND holidays".

    Or should I understand that I can do something like call twice the DisableDates one with days of the week and one with all my holidays

    .DisableDates(DayOfWeek.Saturday, DayOfWeek.Sunday).DisableDates([holidayDate1, holidayDate2, ...])
  13. Eyup
    Admin
    Eyup avatar
    3940 posts

    Posted 22 Mar 2019 Link to this post

    Hello Dan,

    This can be accomplished using the approach from the second picker demonstrated here:
    https://demos.telerik.com/aspnet-mvc/datepicker/disable-dates

    And adding logic to include the weekend:
    @(Html.Kendo().DatePicker()
           .Name("weekend-date-picker")
           .DisableDates("disableDates")
    )

    JS:
    function disableDates(date) {
         var dates = [
             new Date("1/1/2019"),
             new Date("1/21/2019"),
             new Date("2/18/2019"),
             new Date("5/27/2019"),
             new Date("7/4/2019"),
             new Date("9/2/2019"),
             new Date("10/14/2019"),
             new Date("11/11/2019"),
             new Date("11/28/2019"),
             new Date("12/25/2019")
         ];
     
         if (date) {
             var day = date.getDay();
             var isWeekend = (day === 6) || (day === 0);
     
             if (isWeekend || compareDates(date, dates)) {
                 return true;
             } else {
                 return false;
             }
         }
     }
     
     function compareDates(date, dates) {
         for (var i = 0; i < dates.length; i++) {
             if (dates[i].getDate() == date.getDate() &&
                 dates[i].getMonth() == date.getMonth() &&
                 dates[i].getYear() == date.getYear()) {
                 return true
             }
         }
     }

    That should do the trick.

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  14.
  15. Dan
    Dan avatar
    161 posts
    Member since:
    Nov 2017

    Posted 22 Mar 2019 in reply to Eyup Link to this post

    Hi Eyup,

    So this has not been improved in the new telerik version. You got to the same solution that I proposed when asked the question.

    Thanks

Back to Top