Home › Forums › General discussion › Modern CEWP – Hide or remove Saturday and Sunday from List Calendar View
- This topic has 4 replies, 2 voices, and was last updated 2 weeks, 3 days ago by
Wayne Thompson.
-
AuthorPosts
-
-
May 8, 2025 at 05:48 #38620
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 -
May 8, 2025 at 17:43 #38621
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
-
May 8, 2025 at 19:22 #38622
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,
WayneAttachments:
-
May 11, 2025 at 09:43 #38624
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
-
May 11, 2025 at 17:13 #38625
Perfect! 🙂
Clever, that worked so well and satisfies the users in my tenant who asked for it.
As always, thanks again!
Wayne
-
-
AuthorPosts
- You must be logged in to reply to this topic.