我一直在尝试使用脚本编辑器在共享点日历中灰显一天的时间。我需要的是能够在特定的日子进行灰显,例如圣诞节。我找到了一篇文章,该文章使用以下代码在每个周末变灰,但我需要能够选择一个特定的日期而不是每个日期。
附言:我尚未测试以下内容,因此不确定是否可以运行,谢谢大家!
<style type="text/css">
.ms-acal-day6{
background-color:#CCCCCC;
}
.ms-acal-day0{
background-color:#CCCCCC;
}
<style>
最佳答案
灰天一日标头很简单。
演示:
<style>
td[date="12/25/2019"]
{
background-color:#CCCCCC;
}
</style>
虽然如果要使“完整”网格单元变灰,则将更加复杂,但可以为日历渲染注入自定义逻辑,以检查月份并动态添加/删除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>
关于html - 在Sharepoint日历中将一天变灰,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58834664/