如何在每个时隙检测到最大条目时更改日历覆盖

时间:2018-01-03 00:56:14

标签: javascript css sharepoint calendar

  

请按以下步骤操作:

     
      
  1. 您需要创建一个代表日历的视图(您需要声明过滤器)。
  2.   
  3. 创建日历覆盖,在此示例中,我过滤了“ms-acal-item”,因为它是每小时日历项目所在的位置,您需要按F12打开IE Developer Tool,并跟踪...获取精确值getElementsByClassName。
  4.   
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);

1 个答案:

答案 0 :(得分:0)

  

更正时间的更正               “下午3:30 - 下午4:00”,              “凌晨4:00 - 凌晨4:30”,              “凌晨4:30 - 凌晨5:00”,              “下午5:00 - 下午5:30”,   应该是下午。感谢

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 "
            ];