我一直在尝试使用脚本编辑器在共享点日历​​中灰显一天的时间。我需要的是能够在特定的日子进行灰显,例如圣诞节。我找到了一篇文章,该文章使用以下代码在每个周末变灰,但我需要能够选择一个特定的日期而不是每个日期。

附言:我尚未测试以下内容,因此不确定是否可以运行,谢谢大家!


<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>


html - 在Sharepoint日历中将一天变灰-LMLPHP

虽然如果要使“完整”网格单元变灰,则将更加复杂,但可以为日历渲染注入自定义逻辑,以检查月份并动态添加/删除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日历中将一天变灰-LMLPHP

关于html - 在Sharepoint日历中将一天变灰,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58834664/

10-10 20:21