javascript - 在Sharepoint日历中将几天范围变灰(Gray out a range of days in Sharepoint calendar)

Question

We were able to grayout one day but not a range or multiple ranges Please see the photo to see what we've got using the below code, and also please identify which areas we can edit if we need to implement this in multiple script editors :(我们能够在一天之内将其变灰，但不能在一个或多个范围内变灰。请查看图片以查看使用以下代码得到的内容，如果需要在多个脚本编辑器中实现此功能，请确定我们可以编辑哪些区域：)

The grayout needs to be done for the following ranges:(需要在以下范围内进行变灰：) Monday 13 January and ends on Wednesday 8 April 2020(1月13日星期一，至2020年4月8日星期三结束) Tuesday 21 April and ends on Friday 22 May 2020(4月21日星期二至2020年5月22日星期五结束) Tuesday 2 June and ends on Friday 31 July 2020(6月2日星期二，至2020年7月31日星期五结束) Thursday 1 October and ends on Monday 21 December 2020(10月1日星期四至2020年12月21日星期一结束) Thanks for your help in advance folks(谢谢您的帮助) <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>   ask by Hasan Wazzan translate from so

Answer 1

The following code for your reference.(以下代码供您参考。)

We just add the day ranges into the "dateRanges" variable in code.(我们只是将日期范围添加到代码中的“ dateRanges”变量中。) Like: "1/13/2020-4/8/2020".(像：“ 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>