Is there a way to exclude weekends as days in the Date Control for ARO's?

Answers

• Options

  Adam_Dzyacky Product Owner Contributor Monkey ✭✭✭✭✭

  April 2022 edited April 2022

  Great question and something that I think is going to be an opportunity for some use of the portal's CustomSpace directory and possibly the datetime control as defined within the Request Offering itself. High level:

  1. You need to control the time in which a person is allowed to submit, for example they can only choose up to 4 or 5 days from now/the current day. You can do this right now from the Request Offering date control.
  2. While step 1 addresses this, it doesn't completely solve the issue as 4-5 days from now could include weekends. Using the portal's CustomSpace directory you could deploy some JS that modifies the available days on a calendar to exclude weekends.
  3. You (probably) only want this to apply to this single/handful of request offerings vs. every date time control seen across the portal (e.g. incidents, change requests, etc.) so the customization needs to be ever so slightly scoped.

  
  

  For starters, it's always helpful if you have ScriptLoader defined in your CustomSpace directory (e.g. custom.js).

  /* ----------------------------------------------- */
  /* ----------------- Script Loader --------------- */
  /* ----------------------------------------------- */
  
  
  // This helps with loading scripts and debugging
  // Pass in the path of the js file and an array of url segments on which to run this code
  // EG loadScript("/CustomSpace/CustomExtension/CustomExtension.js",["ServiceRequest","Incident"]);
  var loadScript = function (path,urls) { 
      urls.forEach(function(url) {    
          if (window.location.href.toLowerCase().indexOf(url.toLowerCase()) !== -1) { // Verify we are on the valid page            var result = $.Deferred(),
                  script = document.createElement("script");
              script.async = "async";
              script.type = "text/javascript";
              script.src = path;
              script.onload = script.onreadystatechange = function(_, isAbort) {
                  if (!script.readyState || /loaded|complete/.test(script.readyState)) {
                      if (isAbort) {
                          result.reject();
                      } else {
                          result.resolve();
                      }
                  }
              };
              script.onerror = function () { result.reject(); };
              $("head")[0].appendChild(script);
              console.log("Loaded " + path)
              return result.promise();
          }
      })
  };
  
  
  /* ----------------------------------------------- */
  /* --------------- END Script Loader ------------- */
  /* ----------------------------------------------- */
  

  With ScriptLoader in place, you can now call whatever JS you want. In this case, let's invoke some custom JS to modify date time controls on a specific Request Offering (update the path to your specific SO/RO guids). Just place the following line anywhere after ScriptLoader within Custom.js

  loadScript("/CustomSpace/EmployeeLifecycle/DateTime.js",["/SC/ServiceCatalog/RequestOffering/cd1ea7ab-da1d-1dfc-a5d5-3e8845319e45,1635f390-c95d-0e18-b801-32f9a2c0398a"]);
  

  But if you're looking closely, we'll also need to create a new folder in CustomSpace called "EmployeeLifecycle" and create a file called "DateTime.js". So let's do that.

  

  In our "DateTime.js" file, we'll throw in the following code that disables Saturday and Sunday on the control.

  //prevent the selection of Saturday or Sunday
  $(document).ready(function () {
      $("body").on("click", ".k-i-calendar", function () {
        $(this)
          .closest(".k-picker-wrap")
          .find("input[data-control='dateTimePicker']")
          .data("kendoDateTimePicker")
          .setOptions({
              disableDates: ["sa", "su"]
            });
        console.log('DateTime controls modified. Saturday and Sunday excluded.')
      });
    });
  

  
  

  And now navigating to this specific Request Offering you can see that the combination of what was defined in the Request Offering control + CustomSpace is live!

  

  
  

  This probably is not perfect, but hopefully this gets you started in the right direction of being able to finely tune the date control to some select Request Offerings. I based this off the example provided over here - https://demos.telerik.com/kendo-ui/datepicker/disable-dates

  3
• Options

  Simon_Zeinhofer Customer Ninja IT Monkey ✭✭✭✭

  April 2022

  https://community.cireson.com/discussion/comment/23830#Comment_23830

  Until now, I never thought about hiding weekends would be an option :D We have the same problem when users request Hardware.

  I added your solution and it works perfectly. Many thanks for this amazing code :)

  1