Trying to gray out specific days in a SharePoint calendar using the script editor. Looking to target individual days like Christmas day. Came across an article that uses code to gray out weekends, but I need something more precise...
Not sure if this code will work as I haven't tested it yet. Thank you in advance for any help!
<style type="text/css">
.ms-acal-day6{
background-color:#CCCCCC;
}
.ms-acal-day0{
background-color:#CCCCCC;
}
<style>
Simple header grayout will occur for one day.
Example:
<style>
td[date="12/25/2019"]
{
background-color:#CCCCCC;
}
</style>
https://i.sstatic.net/3v2fY.png
If you wish to gray out the ENTIRE grid cell, it becomes more intricate. You would need to incorporate custom logic for calendar rendering to assess the month and dynamically apply or remove CSS.
<style>
td[date="12/25/2019"] {
background-color: #CCCCCC;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(CustomizeCalendarEvents, "SP.UI.ApplicationPages.Calendar.js");
function CustomizeCalendarEvents() {
//Month Calendar View
SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids_Old =
SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids;
SP.UI.ApplicationPages.SummaryCalendarView.prototype.renderGrids =
function SP_UI_ApplicationPages_SummaryCalendarView$renderGrids($p0) {
this.renderGrids_Old($p0);
//alert(document.getElementById("WPQ2_nav_header").innerText);
if (document.getElementById("WPQ2_nav_header").innerText == "December 2019") {
var css = 'table.ms-acal-month tr:nth-child(9) td:nth-child(4){background-color: #CCCCCC;}',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
head.appendChild(style);
style.type = 'text/css';
style.title = 'MSCustom';
if (style.styleSheet) {
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
} else {
$('style[title="MSCustom"]').remove();
}
};
}
</script>
I've been trying to display the contents of an array in a div container on my HTML file, but I'm stuck. Here's what I currently have: function printArray() { var $container = $('.container'); $container.html(''); ...
I want to create a scrolling effect where the contents of the second div are revealed as if they were fixed on the first div, similar to Conichi View example in JSFiddle .one { width: 768px; height: 700px; color: white; background-color: black; ...
I'm encountering an issue when clicking on the edit button, as my data fetched from the DB should be displayed inside a text field. However, I'm facing a CSS-related error: Uncaught TypeError: Cannot read property 'style' of null Belo ...
I am currently facing an issue with my html audio element that plays a track. The setup is quite straightforward: <audio controls loop="loop"> <source type="audio/wav" src="song.wav"> </audio> However, I need to create custom start ...
I'm attempting to design a unique shape using only CSS so that it resembles the following: image of custom image shape I've been experimenting with CSS3 Mask, but unfortunately the support isn't broad enough as I need it to work in IE 10, Fi ...
While developing an app with NextJS and Bootstrap, I noticed a strange dashed gap at the top of the screen in the elements tab. Despite checking for margin or padding-top properties on any element, there doesn't seem to be a clear cause for this issue ...
Here is my HTML: <div class='mainDiv'> <div class='subDiv'></div> </div> This is the corresponding CSS code: .mainDiv { margin-top: 200px; width: 700px; height: 800px; background-color: red ...
There seems to be an issue with centering the icon CSS: .icons .overview { position: relative; float: left; width: 16.6666666667%; text-align: center; overflow: visible; } .icon { display: inline-block; width: 64px; heigh ...
I am having trouble putting text into the input field. $('#btn').on('click', () => { let result = $('.form-group input[type="text"]'); for (i = 0; i < result.length; i++) { result[i].innerText = "Test"; // ...
I'm having trouble aligning the labels within the stacked bar chart. Is there a way to center them within each bar? In the image below, most labels seem to be centered, but there is one that is at the bottom. I've tried adding margins in the CSS, ...
I am attempting to have scroll bars only appear in a table when necessary, while also showing colors upon hovering over rows and columns. The row and column highlighting on hover is functioning properly, but the scroll bar is persistently visible. What st ...
To put it simply, my question involves a table display where student numbers (USN) are concatenated in groups and the entire row is displayed using a foreach loop. Row 1: Subject 1 - 22/07/2015 - 08:00 - 1XX10XX086, 1XX10XX087, 1XX09XX088 Row 2: Subject ...
I am facing the challenge of managing multiple CSS4 variables, including primary, for various companies. How can I dynamically change the primary CSS4 variable color based on the company? Note: My specific requirement is to update the primary variable glo ...
In order to upload an image from the user's device to the server, I am utilizing the following tag: <input type="file" accept="image/*;” /> Upon clicking on the input field, I am presented with two options: Camera and Document. Is there a me ...
I'm having trouble selecting just one radio button at a time. Instead, multiple buttons are being selected. I'm new to HTML and this is the code I'm using. Can someone please assist me with this issue? <form name="ans_a" onsubmit="return ...
My challenge involves a sticky button located inside a container, but the sticky behavior only seems to work within another element that is full width (container-fluid). Is there any way to make the sticky behavior global? I have attempted using 'fix ...
<div class='cluster' id='12' 'style='width:350px;min-height:150px;border:4px solid #339966;'> <div class='image' style='width:150px;height:150px;border:2px solid black;float:left;margin-bottom: ...
Many Bootstrap 4 grid layout demos feature columns within rows, but is it considered improper to have rows within columns? For example: <div class="col col-md-6"> <div class="row"> </div> </div> ...
Looking at the list items inside this div: <div class="container"> <h2>Vanishing Act Game</h2> <div> <li class="list-group-item go" id="item">Door#1</li> <li class="list-group-item go" id="it ...
Is it possible to determine the viewport height of my ng bootstrap modal within my Angular application? Here is what I currently have: I have a modal with CSS styling as shown below: .modal-xxl { width: 95% !important; max-height: 90% !important; ...