Fullcalendar Holiday Highlight

Example of adding shading to holidays.

by Emmanuel Garcia

HTML

<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.0.1/fullcalendar.css">
<div id="calendar"></div>

CSS

body {
    margin: 0;
    padding: 50px 0 0 0;
    font-family:"Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    font-size: 14px;
}
#calendar {
    width: 100%;  
}
.holiday {
    background: yellow;
}

.fc-button-prev{color:#665ea4 !important; font-size:16px;}
.fc-button-next{color:#665ea4 !important; font-size:16px;}

JavaScript

var dateToday = new Date();
$(document).ready(function () {

    $('#calendar').fullCalendar({
        theme: false,
        header: {
            left: 'prev next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay',
            background:'green'
        },
        defaultDate: '2018-12-01',
        editable: true,
        events: [{
            title: 'All Day Event',
            start: '2019-01-10',
            end: '2019-01-15',
            color:'#665ea4',
            background:'green'
        }, {
            title: 'Multideas',
            start: '2018-12-11',
            end: '2018-12-29'
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2014-07-09T16:00:00'
        }, {
            id: 999,
            title: 'Repeating Event',
            start: '2014-07-16T16:00:00'
        }, {
            title: 'Meeting',
            start: '2014-07-12T10:30:00',
            end: '2014-07-12T12:30:00'
        }, {
            title: 'Lunch',
            start: '2014-07-12T12:00:00'
        }, {
            title: 'Birthday Party',
            start: '2014-07-13T07:00:00'
        }, {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2014-07-28'
        }],
        eventAfterAllRender: function (view) {
				//Use view.intervalStart and view.intervalEnd to find date range of holidays
				//Make ajax call to find holidays in range.
				var fourthOfJuly = moment('2019-01-01','YYYY-MM-DD');
				var holidays = [fourthOfJuly];
				var holidayMoment;
				for(var i = 0; i < holidays.length; i++) {				
					holidayMoment = holidays[i];
					if (view.name == 'month') {
						$("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
					} else if (view.name =='agendaWeek') {
						var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
						if (classNames != null) {
							var classNamesArray =...