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

[Wayne Thompson]

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

[Alexander Bautz]

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

[Wayne Thompson]

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:

1. 

   image-2.png
   

[Alexander Bautz]

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

[Wayne Thompson]

Perfect! 🙂

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

As always, thanks again!
Wayne

[Author]

Posts