SharePoint客户端对象模型—任务日历生成

(1)需要用到的CSS样式

<style type="text/css">

th.ms-vh

{

     color:white;

     background-color:rgb(68, 68, 68);

     line-height:25px;    

}

th.ms-vh td.ms-vb a

{

    color:white !important;

}

.taskstatus

{

    background-position:center center;

    background-repeat:no-repeat;

}

.datespan {

            height: 100%;

            text-align: left;

            overflow: hidden;

            padding-bottom: 5px;

            padding-left: 5px;

            font-family: Segoe UI;

            font-size: 8pt;

            float: left;

            white-space: nowrap;

        }

        .dateline {

            border-color: rgb(210, 210, 210);

            height: 100%;

            overflow: hidden;

            border-left-width: 1px;

            border-left-style: solid;

            float: left;

            white-space: nowrap;

        }

        .taskitem {

            height: 36px;

            background-color: rgb(216, 216, 216);

        }

        .taskitem span {

           color: rgb(68, 68, 68);

           font-family: Segoe UI;

           font-size: 8pt;

        }

        .ms-tl-mainArea{

            position:static !important;

            margin-bottom:10px;

        }

        .inline{

            display:none !important;

        }

        .ms-cui-topBarMaximized{

            display:none !important;

        }

        #CSRListViewControlDivWPQ2{

            display:none;

        }

        #Hero-WPQ2{

            display:none;

        }    

#contentBox

{

    margin-right:5px !important;

}

</style>

(2)，用到的Js代码

   2.1  页面加载运行该方法

$(function () {

            ExecuteOrDelayUntilScriptLoaded(getcanderCertType, "sp.js");

        })

   2.2  根据当前项目和当前用户查询数据

function retrieveListItems() {

            var projectId = getQueryString('projectId');

            var userName = $("#O365_MainLink_Me").attr("title");

            var siteUrl = _spPageContextInfo.webServerRelativeUrl;

            var clientContext = new SP.ClientContext(siteUrl);

            //列表名一定要用中文

                var oList = clientContext.get_web().get_lists().getByTitle('项目工作项');

            var camlQuery = new SP.CamlQuery();

            camlQuery.set_viewXml(

                '<View><Query>' +

                '<Where>' +

                    '<And>' +

                    '<Eq>' +

                    '<FieldRef Name=\'Project\' LookupId=\'TRUE\'/><Value Type=\'Lookup\'>' + projectId + '</Value>' +

                    '</Eq>' +

                    '<Eq>' +

                    '<FieldRef Name=\'AssignedTo\'/><Value Type=\'User\'>' + userName + '</Value>' +

                    '</Eq>' +

                    '</And>' +

                '</Where></Query>' +

                '<RowLimit>10</RowLimit></View>'

            );

            this.collListItem = oList.getItems(camlQuery);

            clientContext.load(collListItem);

            clientContext.executeQueryAsync(

                Function.createDelegate(this, this.onQuerySucceeded),

                Function.createDelegate(this, this.onQueryFailed)

            );

        }

        function onQuerySucceeded(sender, args) {

            var listItemInfo = '';

            var listItemEnumerator = collListItem.getEnumerator();

            var today = new Date();

            today.setDate(today.getDate() + 14);

            var nowday = new Date();

            CreateTimeLine(nowday, today, listItemEnumerator);

        }

        function onQueryFailed(sender, args) {

            alert('Request failed. ' + args.get_message() +

                '\n' + args.get_stackTrace());

        }

  2.3  开始根据查询出来的数据动态生成HTML

function CreateTimeLine(startdate, enddate, listItemEnumeratorCertType) {

            //将时间段传进来

            var alldays = 14;

            //将时间段分为6部，每一步的天数

            var steplength = parseInt(alldays / 6);

            //如果小于零，至少有一部！！！我这儿用不到

            //if (steplength == 0) {

            //steplength++;

            //}

            //获取最外层的容器

            var liufirstlevelcontainer = $("#liufirstlevelcontainer");

            //显示时间的p

            var liufirstleveldate = $("#liufirstleveldate");

            //显示时间线的p

            var liufirstleveldateline = $("#liufirstleveldateline");

            //获得外层容器的长度800px

            var containerlength = parseInt($("#DeltaPlaceHolderMain").css("width"));

            //获得每一天的长度，我这儿直接除以14就可以了

            //一共14天，长度800px!相除得到每一天的长度

            var onedaylength = parseInt(containerlength / alldays);

            //给最外层的线添加一个属性

            $(liufirstleveldateline).attr("cutomernumber", alldays)

            var time1 = startdate;

            //获取开始时间

            do {

                //每天的长度乘以每段表示的天数

                var spanlength = onedaylength * steplength;

                //创建一个span标签

                var timespan = document.createElement("span");

                //给这个span设置宽度！

                $(timespan).css("width", spanlength - 4);

                //添加样式

                $(timespan).addClass("datespan");

                //将开始时间写到span里面

                $(timespan).text(time1.toLocaleDateString());

                //将每一步的天数添加到cutomernumber属性上

                $(timespan).attr("cutomernumber", steplength);

                //将这个span加入到p中

                $(timespan).appendTo($(liufirstleveldate));

                //在创建一个span

                var timelinespan = document.createElement("span");

                //span的宽度为每段的长度

                $(timelinespan).css("width", spanlength);

                //添加样式

                $(timelinespan).addClass("dateline");

                //添加属性

                $(timelinespan).attr("cutomernumber", steplength);

                //添加到p中

                $(timelinespan).appendTo($(liufirstleveldateline));

                //将当前时间加一天

                time1 = DateAddDays(time1, steplength);

            } while (time1 <= enddate);

            //创建一个对象

            var taskdates = new Map();

            //声明一个变量表示p的高度

            var pheightnumber = 1;

            //获取所有条目

            var taskrow = new Map();

           startdate = new Date(startdate.getFullYear(), startdate.getMonth(), startdate.getDate(), 0, 0, 10);

            enddate = new Date(enddate.getFullYear(), enddate.getMonth(), enddate.getDate(), 23, 59, 59);

            while (listItemEnumeratorCertType.moveNext()) {

                var listitem = listItemEnumeratorCertType.get_current();

                //获取每个条目的开始日期结束日期

                var itemstartdate = listitem.get_item('StartDate');

                itemstartdate = new Date(itemstartdate.getFullYear(), itemstartdate.getMonth(), itemstartdate.getDate(), 0, 0, 10);

                var itemenddate = listitem.get_item('DueDate');

                itemenddate = new Date(itemenddate.getFullYear(), itemenddate.getMonth(), itemenddate.getDate(), 23, 59, 59);                //声明一个变量等于开始日期

                var tempdate = itemstartdate;

                //定义一个变量表示这个任务上面有几个任务

                if ((itemstartdate >= startdate && itemstartdate <= enddate) || (itemstartdate >= startdate && itemenddate <= enddate) || (itemstartdate <= startdate && itemenddate >= enddate) || (itemenddate >= startdate && itemenddate <= enddate)) {

                    var topnumber = 0;

                    do {

                        //将开始时间转为本地时间

                        var timekey = topnumber + ";" + tempdate.toLocaleDateString();

                        if (taskrow.ContainsKey(timekey)) {

                            var timevalue = taskrow.get(timekey);

                            if (timevalue >= 1) {

                                topnumber = topnumber + 1;

                                tempdate = itemstartdate;

                                continue;

                            }

                        }  

                        //开始时间加一天

                        tempdate = DateAddDays(tempdate, 1);

                        //开始时间每次加一天，当大于结束时间的时候跳出循环

                    } while (tempdate <= itemenddate);

                    var tempsetdate = itemstartdate;

                    do {

                        var timekey = topnumber + ";" + tempsetdate.toLocaleDateString();

                        taskrow.set(timekey, 1);

                        tempsetdate = DateAddDays(tempsetdate, 1);

                    } while (tempsetdate <= itemenddate);

                    if (topnumber + 1 > pheightnumber) {

                        //将外层的p的高度基数加一

                        pheightnumber = topnumber + 1;

                    }

                    //计算每个开始时间结束时间差

                    var itemdays;

                    if (itemenddate >= enddate) {

                        if (itemstartdate <= startdate) {

                            itemdays = daysBetween(enddate, startdate);

                        }

                        else {

                            itemdays = daysBetween(enddate, itemstartdate);

                        }

                    }

                    else {

                        if (itemstartdate <= startdate) {

                            itemdays = daysBetween(itemenddate, startdate);

                        }

                        else {

                            itemdays = daysBetween(itemenddate, itemstartdate);

                        }

                    }

                    //每个条目的长度等于每一天的长度乘以天数

                    if (itemdays == 0)

                    {

                        itemdays = itemdays + 1;

                    }

                    var itemplength = onedaylength * itemdays;

                    //任务的开始时间和当前日历左端开始时间差

                    var leftdays;

                    if (itemstartdate <= startdate) {

                        leftdays = 0

                    }

                    else {

                        leftdays = daysBetween(itemstartdate, startdate);

                    }

                    //距离左边的距离

                    var itempleft = onedaylength * leftdays;

                    //距离上边的距离

                    var itemptop = topnumber * 38;

                    //创建一个p,并定位

                    var itemp = document.createElement("p");

                    if(itemplength+itempleft >containerlength )

                    {

                    itemplength=containerlength -itempleft ;

                    }

                    $(itemp).css("width", itemplength);

                    if (itempleft == 0) {

                        itempleft = parseInt(itempleft) + 1;                    

                        $(itemp).css("border-left", "1px solid white");  

                    }

                    $(itemp).css("left", itempleft);                  

                    $(itemp).css("border-right", "1px solid white");

                    if (itemptop == 0) {

                        itemptop = parseInt(itemptop) + 1;

                    }

                    $(itemp).css("top", itemptop);

                    $(itemp).addClass("ms-tl-bar");

                    $(itemp).addClass(" js-callout-launchPoint");

                    $(itemp).addClass("taskitem");

                    $(itemp).attr("cutomernumber", itemdays);

                    $(itemp).attr("leftnumber", itempleft);

                    //创建一个span

                    var itemtitlespan = document.createElement("span");

                    $(itemtitlespan).addClass("ms-tl-barTitle");

                    //将任务的标题写在上面

                    $(itemtitlespan).text(listitem.get_item('Title'));

                    $(itemtitlespan).appendTo($(itemp));

                    //创建换行标签

                    var itembr = document.createElement("br");

                    $(itembr).appendTo($(itemp));

                    //创建span标签

                    var itemtimespan = document.createElement("span");

                    $(itemtimespan).addClass("ms-tl-barDate");

                    //添加样式

                    var itemtimestr = (itemstartdate.getMonth() + 1) + "/" + itemstartdate.getDate() + "  -  " + (itemenddate.getMonth() + 1) + "/" + itemenddate.getDate();

                    //将任务时间写在任务span上

                    $(itemtimespan).text(itemtimestr);

                     $(itemp).attr("title",itemtimestr);

                    $(itemtimespan).appendTo($(itemp));

                    //最后加到外层p上

                    $(itemp).appendTo($(liufirstlevelcontainer));

                }

            }

            //给最外层的p设置高度

            $(liufirstlevelcontainer).css("height", pheightnumber * 38);

            $(liufirstlevelcontainer).find("span.liutooltip").css("display", "none");

        }

  2.4  需要用到的一些辅助的方法

function Map() {

            this.keys = new Array();

            this.data = new Array();

            //添加键值对

            this.set = function (key, value) {

                if (this.data[key] == null) {//如键不存在则身【键】数组添加键名

                    this.keys.push(key);

                }

                this.data[key] = value;//给键赋值

            };

            //获取键对应的值

            this.get = function (key) {

                return this.data[key];

            };

            //去除键值，(去除键数据中的键名及对应的值)

            this.remove = function (key) {

                this.keys.remove(key);

                this.data[key] = null;

            };

            //判断键值元素是否为空

            this.isEmpty = function () {

                return this.keys.length == 0;

            };

            //获取键值元素大小

            this.size = function () {

                return this.keys.length;

            };

            this.ContainsKey = function (key) {

                if (this.data[key] == null) {//如键不存在则身【键】数组添加键名

                    return false;

                }

                else {

                    return true;

                }

            }

        }

        function DateAddDays(date, number) {

            return new Date(Date.parse(date) + number * 86400000);

        }

        function daysBetween(today, nowday) {

            var dt1 = new Date();

            dt1.setFullYear(today.getFullYear());

            dt1.setMonth(today.getMonth());

            dt1.setDate(today.getDate());

            var dt2 = new Date();

            dt2.setFullYear(nowday.getFullYear());

            dt2.setMonth(nowday.getMonth());

            dt2.setDate(nowday.getDate());

            var dif = dt1.getTime() - dt2.getTime();

            var days = dif / (24 * 60 * 60 * 1000);

            return Math.abs(days);

        }

3，页面上的HTML容器

 <p style="margin-bottom:20px;color:black; font-size:large">当前项目一级工作项</p>

  <p style="left: 0px; top: 0px; width: 100%; position: relative; -ms-content-zooming: none; -ms-touch-action: none;">

        <p id="firstlevelcontainer" class="ms-tl-mainArea" style="left: 0px; top: 46px; width: 100%; min-width: 800px; height: 37px; background-color: rgb(252, 252, 252);">

            <span class="tooltip" style="color: red;">正在生成日历....</span>

            <p class="ms-tl-timescale" style="left: 0px; top: -20px; width: 100%; height: 20px;">

                <p id="firstleveldate" style="left: 0px; top: 0px; width: 10000px; height: 19px; color: rgb(119, 119, 119); overflow: hidden; margin-left: 2px; border-bottom-color: rgb(119, 119, 119); border-bottom-width: 1px; border-bottom-style: hidden; white-space: nowrap; position: absolute;">

                </p>

                <p id="firstleveldateline" style="left: 0px; top: 9px; width: 10000px; height: 10px; color: rgb(119, 119, 119); overflow: hidden; margin-left: 0px; border-bottom-color: rgb(119, 119, 119); border-bottom-width: 1px; border-bottom-style: hidden; white-space: nowrap; position: absolute;">

                </p>

            </p>

        </p>

    </p>