Hi All,

I am trying to apply a different color for specific dates when we have scheduled a Board Meeting.  I do not want to restrict the other dates; I will only apply colors when the meeting is executed.  

I got a script, but  I cannot make it work.  I even tried to apply the colors directly using CSS, but I had no luck.  Here is one of the scripts I used:  

// Function to load jQuery if not already loaded
function loadJQuery(callback) {
    if (window.jQuery === undefined) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://code.jquery.com/jquery-3.6.0.min.js";
        script.onload = callback;
        document.head.appendChild(script);
    } else {
        callback();
    }
}

// Your main script that depends on jQuery
function mainScript() {
    $(document).ready(function() {
        // Array of dates when the background color should change
        var agendaDates = ["2024-06-01", "2024-06-15", "2024-07-01"];

        // Function to change the background color of specific dates
        function highlightDates() {
            $(".flatpickr-day").each(function() {
                var cellDate = $(this).attr("aria-label");
                if (agendaDates.includes(cellDate)) {
                    $(this).css("background-color", "#FFDDC1"); // Change to your desired color
                }
            });
        }

        // Initial call to highlight dates after flatpickr initialization
        setTimeout(highlightDates, 100);

        // Trigger the function on month navigation
        $(document).on('click', '.flatpickr-prev-month, .flatpickr-next-month', function() {
            setTimeout(highlightDates, 100); // Adding a small delay to ensure the DOM updates
        });

        // Re-run the highlight function whenever the calendar view changes
        $(document).on('click', '.flatpickr-day', function() {
            highlightDates();
        });
    });
}

// Load jQuery and then run the main script
loadJQuery(mainScript);