On Calendar view is it possible to shade an entire day without creating a separate layout?

Question

I have a calendar that I'm using to track vacation across multiple accounts. I'm trying to find a way to make holidays stand out more prominent than just another event on the calendar.

I found this code provided by another user:

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
    //set specific days
    var holidays=["12/31/2017","1/1/2018","1/14/2018","1/17/2018","2/11/2018"];

    setInterval(function (){
        for(var i=0;i<holidays.length;i++){
            var dayrows = $('tr.ms-acal-summary-dayrow td');
            var itemrows = $('tr.ms-acal-summary-itemrow td');      
            $(dayrows).each(function(j) {
                if($(this).attr('date')==holidays[i]){
                    $(this).css("background-color","black");
                    $(itemrows[j]).children().css("background-color","black");
                }           
            });
        } 
    },500);
});
</script>

My question is, where would I put this code in SharePoint-Online?

Answer 1

If you are using a classic site, you would put this code in a Content Editor Web Part on the same classic page as your calendar list Web Part.

If you are using a Modern site, that type of DOM manipulation is not supported.