SharePoint客户端对象模型—任务日历生成
1，憋了好几天在经理帮助下用Js根据任务列表，生成的个人任务日历。
(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"); //显示时间的div var liufirstleveldate = $("#liufirstleveldate"); //显示时间线的div 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加入到div中 $(timespan).appendTo($(liufirstleveldate)); //在创建一个span var timelinespan = document.createElement("span"); //span的宽度为每段的长度 $(timelinespan).css("width", spanlength); //添加样式 $(timelinespan).addClass("dateline"); //添加属性 $(timelinespan).attr("cutomernumber", steplength); //添加到div中 $(timelinespan).appendTo($(liufirstleveldateline)); //将当前时间加一天 time1 = DateAddDays(time1, steplength); } while (time1 <= enddate); //创建一个对象 var taskdates = new Map(); //声明一个变量表示div的高度 var divheightnumber = 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 > divheightnumber) { //将外层的div的高度基数加一 divheightnumber = 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 itemdivlength = onedaylength * itemdays; //任务的开始时间和当前日历左端开始时间差 var leftdays; if (itemstartdate <= startdate) { leftdays = 0 } else { leftdays = daysBetween(itemstartdate, startdate); } //距离左边的距离 var itemdivleft = onedaylength * leftdays; //距离上边的距离 var itemdivtop = topnumber * 38; //创建一个div,并定位 var itemdiv = document.createElement("div"); if(itemdivlength+itemdivleft >containerlength ) { itemdivlength=containerlength -itemdivleft ; } $(itemdiv).css("width", itemdivlength); if (itemdivleft == 0) { itemdivleft = parseInt(itemdivleft) + 1; $(itemdiv).css("border-left", "1px solid white"); } $(itemdiv).css("left", itemdivleft); $(itemdiv).css("border-right", "1px solid white"); if (itemdivtop == 0) { itemdivtop = parseInt(itemdivtop) + 1; } $(itemdiv).css("top", itemdivtop); $(itemdiv).addClass("ms-tl-bar"); $(itemdiv).addClass(" js-callout-launchPoint"); $(itemdiv).addClass("taskitem"); $(itemdiv).attr("cutomernumber", itemdays); $(itemdiv).attr("leftnumber", itemdivleft); //创建一个span var itemtitlespan = document.createElement("span"); $(itemtitlespan).addClass("ms-tl-barTitle"); //将任务的标题写在上面 $(itemtitlespan).text(listitem.get_item('Title')); $(itemtitlespan).appendTo($(itemdiv)); //创建换行标签 var itembr = document.createElement("br"); $(itembr).appendTo($(itemdiv)); //创建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); $(itemdiv).attr("title",itemtimestr); $(itemtimespan).appendTo($(itemdiv)); //最后加到外层div上 $(itemdiv).appendTo($(liufirstlevelcontainer)); } } //给最外层的div设置高度 $(liufirstlevelcontainer).css("height", divheightnumber * 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容器
<div style="margin-bottom:20px;color:black; font-size:large">当前项目一级工作项</div>
<div style="left: 0px; top: 0px; width: 100%; position: relative; -ms-content-zooming: none; -ms-touch-action: none;">
<div 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>
<div class="ms-tl-timescale" style="left: 0px; top: -20px; width: 100%; height: 20px;">
<div 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;">
</div>
<div 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;">
</div>
</div>
</div>
</div>
4，最后上传一下效果图
