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，最后上传一下效果图
SharePoint客户端对象模型—任务日历生成的更多相关文章
- SharePoint 客户端对象模型共用ClientContext的坑
首先请看代码 private static void Main(string[] args) { Test2(); } private static void Test2() { var client ...
- SharePoint 2013 Silverlight中使用Net客户端对象模型
1.创建Silverlight时,选择Silverlight 4,不要选择版本5,试了很久版本5都调用不了,自己也不知道什么原因,谷歌也没找到答案,后来尝试版本4,可以调用: 至于Host the S ...
- SharePoint服务器端对象模型 之 对象模型概述（Part 2）
(三)Url 作为一个B/S体系,在SharePoint的属性.方法参数和返回值中,大量的涉及到了Url,总的来说,涉及到的Url可以分为如下四类: 绝对路径:完整的Url,包含了协议头(http或h ...
- 开启貌似已经过时很久的新坑：SharePoint服务器端对象模型
5年前(嗯,是5年前),SharePoint 2010刚发布的时候,曾经和kaneboy试图一起写一本关于SharePoint 2010开发的书,名字叫<SharePoint 2010 应用开发 ...
- SharePoint服务器端对象模型 之 使用CAML进展数据查询
SharePoint服务器端对象模型 之 使用CAML进行数据查询 一.概述 在SharePoint的开发应用中,查询是非常常用的一种手段,根据某些筛选.排序条件,获得某个列表或者某一些列表中相应的列 ...
- SharePoint服务器端对象模型 之 访问网站和列表数据（Part 1）
本节将会介绍SharePoint中最为常用的一些对象模型,以及如何使用这些对象模型来访问和操作网站中的数据.几乎所有的SharePoint服务器端开发都会涉及到这些内容,因此应着重掌握本节中所介绍的基 ...
- SharePoint Framework 配置你的SharePoint客户端web部件开发环境
博客地址:http://blog.csdn.net/FoxDave 你可以使用Visual Studio或者是你自己的开发环境来构建SharePoint客户端web部件.你可以使用Mac.PC或是 ...
- SharePoint服务器端对象模型 之 序言
对于刚刚开始接触SharePoint的开发人员,即使之前有较为丰富的ASP.NET开发经验,在面对SharePoint时候可能也很难找到入手的方向.对于任何一种开发平台而言,学习开发的过程大致会包括: ...
- SharePoint服务器端对象模型 之 对象模型概述（Part 1）
在一个传统的ASP.NET开发过程中,我们往往会把开发分为界面展现层.逻辑业务层和数据访问层这三个层面.作为一个应用开发平台,SharePoint是微软在直观的开发能力和自由的扩展能力之间,取到的一个 ...
随机推荐
- Vijos / 题库 / 输油管道问题
背景 想念car的GF,car就出了道水题! 描述 某石油公司计划建造一条由东向西的主输油管道.该管道要穿过一个有n 口油井的油田.从每口油井都要有一条输油管道沿最短路经(或南或北)与主管道相连.如果 ...
- java线程的常用方法
java线程的常用方法 编号 方法 说明 1 public void start() 使该线程开始执行:Java 虚拟机调用该线程的 run 方法. 2 public void run() 如果该线程 ...
- 004bean作用域
1.Singleton(单例) 2.Prototype(原型)---->每次注入.通过Spring应用上下文获取,都会重新创建 @Scope(ConfigurableBeanFactory ...
- VMware虚拟机上配置CentOS联网
转自https://www.cnblogs.com/cindy-cindy/p/6784536.html 1.首先保证虚拟机的网络适配器为NAT模式 2.设置虚拟机的“编辑”-->“虚拟网络编辑 ...
- Linux命令行bash批量重命名文件
本文介绍下,在linux下使用shell批量重命名文件的例子,有需要的朋友参考下吧. 在linux中,重命名文件名,需要用到mv命令.如果需要批量重命名名一批文件,就需要写bash脚本或命令行了. 例 ...
- spring mvc拦截器HandlerInterceptor
本文主要介绍springmvc中的拦截器,包括拦截器定义和的配置,然后演示了一个链式拦截的测试示例,最后通过一个登录认证的例子展示了拦截器的应用 拦截定义 定义拦截器,实现HandlerInterce ...
- Linux下部署redis以及相关简介
什么是redis? Redis是一个高性能的key-value数据库.key-value分布式存储系统查询速度快.存放数据量大.支持高并发,非常适合通过主键进行查询,但不能进行复杂的条件查询.key ...
- 初识Spark程序
执行第一个spark程序 普通模式提交任务: bin/spark-submit \ --class org.apache.spark.examples.SparkPi \ --master spark ...
- 用Easing函数实现碰撞效果
用Easing函数实现碰撞效果 工程中需要的源码请从这里下载: https://github.com/YouXianMing/EasingAnimation 源码: // // ViewControl ...
- [翻译] KYCircularProgress
KYCircularProgress Flexible progress bar written in Swift. 用Swift语言编写的灵活的进度条控件. Features Gradation C ...