在Sharepoint日历中显示灰色天数

Question

我们能够在一天之内将其变灰，但没有一个范围或多个范围请查看照片以查看使用以下代码得到的结果，如果需要在多个脚本编辑器中实现此功能，请确定我们可以编辑哪些区域：

需要在以下范围内进行灰显：

[1月13日星期一，至2020年4月8日星期三结束] >>

[4月21日，星期二，至2020年5月22日，星期五] >>

[6月2日，星期二，至2020年7月31日，星期五] >>

[10月1日星期四至2020年12月21日星期一结束

感谢您对高级人员的帮助

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

我们能够在一天之内将其变灰，但没有一个范围或多个范围，请使用下面的代码查看照片，了解我们的功能，如果需要，请确定我们可以编辑哪些区域...

以下代码供您参考。我们只是将日期范围添加到代码中的“ dateRanges”变量中。像：“ 1/13 / 2020-4 / 8/2020”。

<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);
        grayoutDate();
    };
}
function grayoutDate(){
    var dateRanges=["1/13/2020-4/8/2020","4/21/2020-5/22/2020","6/2/2020-7/31/2020","10/1/2020-12/21/2020"];
    $(".ms-acal-summary-dayrow").each(function(){
        $(this).children("td").each(function(i){
            var date=new Date($(this).attr("date"));
            for(var j=0;j<dateRanges.length;j++){
                var dateRange=dateRanges[j].split("-");
                if(date>=new Date(dateRange[0])&&date<=new Date(dateRange[1])){
                    $(this).css("background-color","#CCCCCC");
                    $(this).closest("tr").next().children().eq(i).css("background-color","#CCCCCC");
                }
            }

        });
    });   
}
</script>

Answer 1

以下代码供您参考。我们只是将日期范围添加到代码中的“ dateRanges”变量中。像：“ 1/13 / 2020-4 / 8/2020”。