Modern CEWP – Hide or remove Saturday and Sunday from List Calendar View

Home Forums General discussion Modern CEWP – Hide or remove Saturday and Sunday from List Calendar View

Viewing 4 reply threads
  • Author
    Posts
    • #38620
      Wayne Thompson
      Participant

        Hi everyone! 🙂

        Seeking volunteers and examples of any custom code for the following scenario:

        How to hide or remove Saturday and Sunday from the Month layout of a List Calendar View in a modern SP site using the Modern CEWP.

        This is what I was working with, but I am not having any success:

        document.addEventListener(‘DOMContentLoaded’, function() {
        // Function to hide Saturday and Sunday columns in the month view
        function hideWeekends() {
        // Select all calendar cells
        var calendarCells = document.querySelectorAll(‘.ms-Grid-col’);

        calendarCells.forEach(function(cell) {
        // Check if the cell represents Saturday or Sunday
        var day = cell.getAttribute(‘data-day’);
        if (day === ‘Saturday’ || day === ‘Sunday’) {
        cell.style.display = ‘none’;
        }
        });
        }

        // Run the function to hide weekends
        hideWeekends();
        });

        Thanks,
        Wayne

      • #38621
        Alexander Bautz
        Keymaster

          Hi,
          This is not properly tested, but you can try something like this:

          setInterval(() => {
              const calMonthWrap = document.querySelector("div[data-automationid='CalendarMonthSurface']");
              if (calMonthWrap !== null) {
                  calMonthWrap.querySelectorAll("div[aria-label*='Saturday']").forEach((cell, index) => {
                      cell.closest("div[class*='dayCell_']").style.display = "none";
                  });
          
                  calMonthWrap.querySelectorAll("div[aria-label*='Sunday']").forEach((cell, index) => {
                      cell.closest("div[class*='dayCell_']").style.display = "none";
                  });
              }
              const calMonthHeader = document.querySelector("div[data-automationid='CalendarMonthDateHeader']");
              if (calMonthHeader !== null) {
                  calMonthHeader.childNodes.forEach((cell, index) => {
                      if (index > 4) {
                          cell.style.visibility = "hidden";
                      }
                  });
              }
          }, 500);
          

          Alexander

        • #38622
          Wayne Thompson
          Participant

            Hi Alexander! 🙂

            That worked like a charm!

            The bars of any event that falls on the weekend still extend to the empty space that was previously shown as Saturday and Sunday. Any suggestions on how we could hide the event bars also?

            As always, thanks so much for addressing so many various scenarios!

            Thanks,
            Wayne

            Attachments:
          • #38624
            Alexander Bautz
            Keymaster

              You can hide the elements indirectly by setting the background of Saturday and Sunday as white and setting the zIndex value higher than the floating elements. Try using this:

              setInterval(() => {
                  const calMonthWrap = document.querySelector("div[data-automationid='CalendarMonthSurface']");
                  if (calMonthWrap !== null) {
                      calMonthWrap.querySelectorAll("div[aria-label*='Saturday']").forEach((cell, index) => {
                          const closest = cell.closest("div[class*='dayCell_']");
                          if(closest !== null){
                              // closest.style.display = "none";
                              closest.innerHTML = "";
                              closest.style.zIndex = "2147483647";
                              closest.style.backgroundColor = "white";
                              closest.style.border = "none";                
                          }
                      });
              
                      calMonthWrap.querySelectorAll("div[aria-label*='Sunday']").forEach((cell, index) => {
                          const closest = cell.closest("div[class*='dayCell_']")
                          if(closest !== null){
                              // closest.style.display = "none";
                              closest.innerHTML = "";
                              closest.style.zIndex = "2147483647";
                              closest.style.backgroundColor = "white";
                              closest.style.border = "none";  
                          }
                      });
                  }
                  const calMonthHeader = document.querySelector("div[data-automationid='CalendarMonthDateHeader']");
                  if (calMonthHeader !== null) {
                      calMonthHeader.childNodes.forEach((cell, index) => {
                          if (index > 4) {
                              cell.style.visibility = "hidden";
                          }
                      });
                  }
              }, 500);
              

              Alexander

            • #38625
              Wayne Thompson
              Participant

                Perfect! 🙂

                Clever, that worked so well and satisfies the users in my tenant who asked for it.

                As always, thanks again!
                Wayne

            Viewing 4 reply threads
            • You must be logged in to reply to this topic.