javascript - 如何在每个时间段检测到最大条目时更改日历覆盖

Question

Please follow these steps:

1. you need to create a view to represent your calendar (You'll need to declare your filters).
2. create a calendar overlay, in this example, I filtered "ms-acal-item" because it is where the calendar items per hour is located, you'll need to open the IE Developer Tool by pressing F12, and trace the ... to get the exact value getElementsByClassName.

var times = [
            "7:00 am - 7:30 am ", 
            "7:30 am - 8:00 am ", 
            "8:00 am - 8:30 am ", 
            "8:30 am - 9:00 am ",
            "9:00 am - 9:30 am ",
            "9:30 am - 10:00 am ",
            "10:00 am - 10:30 am ",
            "10:30 am - 11:00 am ",
            "11:00 am - 11:30 am ",
            "11:30 am - 12:00 pm ",
            "12:00 pm - 12:30 pm ",
            "12:30 pm - 1:00 pm ",
            "1:00 pm - 1:30 pm ",
            "1:30 pm - 2:00 pm ",
            "2:00 pm - 2:30 pm ",
            "2:30 pm - 3:00 pm ",
            "3:00 pm - 3:30 pm ",
            "3:30 pm - 4:00 pm ",
            "4:00 am - 4:30 am ",
            "4:30 am - 5:00 am ",
            "5:00 pm - 5:30 pm ",
            "5:30 pm - 6:00 pm ",
            "6:00 pm - 6:30 pm ",
            "6:30 pm - 7:00 pm "
            ];

function ApplyColor() {

    var nodes, iCount, TimeIdentifier;

    for (x = 0; x < times.length; x++){
        TimeIdentifier = times[x];
        console.log(times[x]);
        nodes = document.getElementsByClassName("ms-acal-item");

        iCount = 0;

        for (var i = 0; i < nodes.length; i++) {

            if (nodes[i].outerHTML.indexOf(TimeIdentifier) != -1) {

                console.log(nodes[i].outerHTML);
                var parts = nodes[i].outerHTML.split(TimeIdentifier);

                iCount += 1;

                // Set the maximim number of entries to make it red
                if (iCount >= 4)
                {
                    if (parts[1])
                    {
                        var color = GetCalendarColour("red");
                        nodes[i].style.background = color;
                    }
                }
            }
        }                       
    }
}

function GetCalendarColour(desc) {
    var colour;
    switch (desc.toLowerCase()) {

        case "red":
            colour = "rgb(255,000,000)";
            break;

        default:
            colour = "";
    }
    return colour;
}

window.setInterval(function () {
    ApplyColor();
}, 500);

Answer 1

Correction for var times "3:30 pm - 4:00 pm ", "4:00 am - 4:30 am ", "4:30 am - 5:00 am ", "5:00 pm - 5:30 pm ", should be pm. Thanks

var times = [
            "7:00 am - 7:30 am ", 
            "7:30 am - 8:00 am ", 
            "8:00 am - 8:30 am ", 
            "8:30 am - 9:00 am ",
            "9:00 am - 9:30 am ",
            "9:30 am - 10:00 am ",
            "10:00 am - 10:30 am ",
            "10:30 am - 11:00 am ",
            "11:00 am - 11:30 am ",
            "11:30 am - 12:00 pm ",
            "12:00 pm - 12:30 pm ",
            "12:30 pm - 1:00 pm ",
            "1:00 pm - 1:30 pm ",
            "1:30 pm - 2:00 pm ",
            "2:00 pm - 2:30 pm ",
            "2:30 pm - 3:00 pm ",
            "3:00 pm - 3:30 pm ",
            "3:30 pm - 4:00 pm ",
            "4:00 pm - 4:30 pm ",
            "4:30 pm - 5:00 pm ",
            "5:00 pm - 5:30 pm ",
            "5:30 pm - 6:00 pm ",
            "6:00 pm - 6:30 pm ",
            "6:30 pm - 7:00 pm "
            ];