前言
本文给大家介绍了Javascript开发二维周视图日历的相关内容，即之前实现了一个月视图日历，我们今天来实现一个二维周视图的日历。
以下进行分析其中的关键部分。
结构准备
不同之处在于其在日历的基础上还有一个分类轴，用于展示不同的类目，主要用于一周内的日程安排、会议安排等。
二维则和之前单独的有所不同，二维日历再切换日期时不用全部重新渲染，分类是不用变的，仅仅改变显示的日期即可。
而且由于是二维的，插入的内容必定是同时属于一个分类和一个时间段的，内容肯定是可以跨越时间(即日期轴)的，因此不能直接将插入的内容像开始的日历一样直接放置在日历的格子中。而要进行单独的处理。
考虑到以上情况，插入内容的和网格是需要分开来的，我将现成的日历弄成一下3D效果示意:
基于以上分析，先构建如下基本结构:
结构如上，实现代码就不用展示了。
绘制实现
初始好了必要的结构，我们接着进行日历的绘制工作。
分类绘制
首先要处理的是分类，周视图中，一周的天数是固定的，确定好分类才能绘制出主体部分的网格。
对于分类，暂时考虑如下必要数据格式：
实现如下：
// 绘制分类
this._renderCatagories();
// 绘制其他需要改变的部分
this._renderChanged();
},// 左侧分类渲染
_renderCatagories: function () {
this._categoryListEl.innerHTML = '';
var i = 0,data = this._categoryData,node = document.createElement('li'),cataEl;
node.className = 'ep-weekcalendar-category';
// 用行作为下标记录当前分类id集合
this._categoryIndexs = [];
// id为键记录索引
this._categoryReocrds = {};
while (i < data.length) {
this._categoryIndexs.push(data[i].id);
this._categoryReocrds[data[i].id] = i;
cataEl = node.cloneNode(true);
this._rendercategory(data[i],cataEl);
i++;
}
},_rendercategory: function (cate,cateEl) {
cateEl.setAttribute('data-cateid',cate.id);
var titleEl = document.createElement('span'),contentEl = document.createElement('span');
titleEl.className = 'title';
contentEl.className = 'content';
titleEl.innerHTML = cate.name;
contentEl.innerHTML = cate.content;
cateEl.appendChild(titleEl);
cateEl.appendChild(contentEl);
this.fire('categoryRender',{
categoryEl: cateEl,titleEl: titleEl,contentEl: contentEl
});
this._categoryListEl.appendChild(cateEl);
this.fire('agterCategoryRender',contentEl: contentEl
});
}
}
上面通过设置分类数据 setCategory 作为入口，调用绘制分类方法，其中还调用了 _renderChanged 此方法用于重新绘制日历的可变部分，如标题、日期和其中的内容，会在之后进行介绍。
日期绘制
上面已经准备好了分类轴，还需要绘制出日期轴，对于周视图而言，一周的实现就非常简单了，根据一周的开始日期，依次渲染7天即可。 注意在绘制过程中提供日期的必要信息给相应事件，一遍使用者能够在事件中进行个性化处理。
网格和内容
上面已经准备好了二维视图中的两个轴，接着进行网格和内容层的绘制即可。
网格
此处以分类为Y方向（行），日期为X方向（列）来进行绘制：
j++;
}
this._gridEl.appendChild(row);
i++;
}
rowNode = itemNode = row = item = null;
}
}
内容
理论上来说，二维要支持跨行、跨列两种情况，即内容区域应该为一整块元素。但是结合到实际情况，跨时间的需求普遍存在（一个东西在一段时间内被连续使用）。跨分类并没有多大的实际意义，本来就要分开以分类来管理，再跨分类，又变得复杂了。而且即使一定要实现一段时间内同时在使用多个东西，也是可以直接实现的（分类A在XX时间段内被使用，B在XX时间段内被使用，只是此时XX正好相同而已）。
因此此处仅处理跨时间情况，可将内容按行即分类进行绘制，这样在插入内容部件时，可以简化很多计算。
this._contentEl.appendChild(row);
++i;
}
row = node = null;
},// 日期切换时清空内容
_clearContent: function () {
var rows = this._contentEl.childNodes,i = 0;
while (i < rows.length) {
rows[i].innerHTML && (rows[i].innerHTML = '');
++i;
}
// 部件数据清空
this._widgetData = {};
}
}
如果一定要实现跨行跨列的情况，直接将内容绘制成一整块元素即可，但是在点击事件和插入内容部件时，需要同时计算对应的分类和日期时间。
难点实现
内容部件插入
我们实现这个二维周视图日历的主要目的就是要支持插入任意的内容，上面已经准备好了插入内容的dom元素，这里要做的就是将数据绘制成dom放置在合适的位置。
考虑必要的内容部件数据结构如下：
由于上面在内容区域是直接按照分类作为绘制的，因此拿到数据后，对应的分类就已经存在了。重点要根据指定的开始和结束时间计算出开始和结束位置。
考虑如下：
- 考虑响应式，位置计算按照百分比计算
- 一周的总时间是固定的，开始日期时间和这周开始日期时间的差额占总时间的百分比即开始位置的百分比
- 结束日期时间和开始时间的差额占总时间的百分比即为结束时间距离最左侧的百分比
- 注意处理开始和结束时间溢出本周的情况
因此关于位置计算可以用如下代码处理：
上面就拿到了一个数据所对应的开始位置和结束位置。基本上是已经完成了，但是还需要再处理一个情况：相同分类下的时间冲突问题。
考虑以如下方式进行：
实现如下：
完成以上两步就可以往我们的内容区域中插入了
点击事件和范围选择
此控件不仅用于结果展示，还要可用于点击进行添加，需要处理其点击事件，但是由于要展示内容，内容是覆盖在分类和日期构成的网格之上的，用户的点击是点击不到网格元素的，必须要根据点击的位置进行计算来获取所点击的日期和所在分类。
同时，由于展示的部件都是时间范围的，因此点击返回某天和某个分类是不够的，还需要能够支持鼠标按下拖动再松开，来直接选的一段时间。
考虑到以上需求，点击事件不能直接使用 click 来实现，考虑使用 mousedown 和 mouseup 来处理点击事件，同时需要在 mousemove 中实时给出用户响应。
});
// 移动和松开 松开鼠标 记录结束列 触发点击事件
// 不能直接绑定在日期容器上 否则鼠标移出日历后，松开鼠标，实际点击已经结束，但是日历上处理不到。
jQuery('body')
// 点击移动过程中 实时响应选中状态
.on('mousemove.weekcalendar',function (e) {
if (!isDurringClick) {
return;
}
isMoveing = true;
// 当前列索引
var currColumn;
// mousemoveTimer = setTimeout(function () {
currColumn = (e.pageX - gridLeft) / columnWidth >> 0;
// 修正溢出
currColumn = currColumn > 6 ? 6 : currColumn;
currColumn = currColumn < 0 ? 0 : currColumn;
$columns.removeClass(me._selectedCls);
// 起止依次选中
var start = Math.min(columnStart,currColumn),end = Math.max(columnStart,currColumn);
do {
$columns.eq(start).addClass(me._selectedCls);
} while (++start <= end);
})
// 鼠标松开
.on('mouseup.weekcalendar',function (e) {
if (!isDurringClick) {
return;
}
var startIndex = -1,endIndex = -1;
columnEnd = (e.pageX - gridLeft) / columnWidth >> 0;
columnEnd = columnEnd > 6 ? 6 : columnEnd;
// 没有移动过时
if (!isMoveing) {
startIndex = endIndex = columnEnd;
// 直接down up 没有move的过程则只会有一个选中的，直接以结束的作为处理即可
$columns.eq(columnEnd).addClass(me._selectedCls)
.siblings().removeClass(me._selectedCls);
} else {
startIndex = Math.min(columnStart,columnEnd);
endIndex = Math.max(columnStart,columnEnd);
}
// 触发点击事件
me.fire('cellClick',{
// 分类id
categoryId: me._categoryIndexs[row],// 时间1
startDate: me._dateRecords[startIndex].format('YYYY-MM-DD'),// 日期2
endDate: me._dateRecords[endIndex].format('YYYY-MM-DD'),// 行索引
rowIndex: row,// 列范围
columnIndexs: (function (i,j) {
var arr = [];
while (i <= j) {
arr.push(i++);
}
return arr;
}(startIndex,endIndex))
});
row = columnStart = columnEnd = isMoveing = isDurringClick = false;
});
}
}
此过程要注意的问题是：mousedown 必须绑定在日历上，而 mouseup 和 mousemove 则不能绑定在日历上，具体原因已经写在上面代码注释中了。
另外需要注意，由于范围点击选择使用了 mousedown 和 mouseup 来模拟，那么日历内容区域中插入的数据部件的点击事件也要用 mousedown 和 mouseup 来模拟，因为 mouseup 触发比 click 早，如果使用 click ，会导致先触发日历上的日期点击或日期范围点击。
使用
此日历实现基于一个控件基类扩展而来，其必要功能仅为一套事件机制，可参考
实测一下效果吧：
源码下载：
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
原文链接：https://www.f2er.com/js/34701.html