利用Javascript开发一个二维周视图日历(3)

日期：2020-05-11 栏目：程序人生浏览：次

网格和内容

上面已经准备好了二维视图中的两个轴，接着进行网格和内容层的绘制即可。

网格

此处以分类为Y方向（行），日期为X方向（列）来进行绘制：

{
 // 右侧网格
 _renderGrid: function () {
 this._gridEl.innerHTML = '';
 var rowNode = document.createElement('div'),
 itemNode = document.createElement('span'),
 rowsNum = this._categoryData.length,
 i = 0,
 j = 0,
 row, item;
 rowNode.className = 'ep-weekcalendar-grid-row';
 itemNode.className = 'ep-weekcalendar-grid-item';
 while (i < rowsNum) {
 row = rowNode.cloneNode();
 row.setAttribute('data-i', i);
 j = 0;
 while (j < 7) {
 item = itemNode.cloneNode();
 // 周末标识
 if (this.dayStartFromSunday) {
  if (j === 0 || j === 6) {
  item.className += ' weekend';
  }
 } else {
  if (j > 4) {
  item.className += ' weekend';
  }
 }
 item.setAttribute('data-i', i);
 item.setAttribute('data-j', j);
 row.appendChild(item);

 j++;
 }
 this._gridEl.appendChild(row);

 i++;
 }
 rowNode = itemNode = row = item = null;
 }
}

内容

理论上来说，二维要支持跨行、跨列两种情况，即内容区域应该为一整块元素。但是结合到实际情况，跨时间的需求普遍存在（一个东西在一段时间内被连续使用）。跨分类并没有多大的实际意义，本来就要分开以分类来管理，再跨分类，又变得复杂了。而且即使一定要实现一段时间内同时在使用多个东西，也是可以直接实现的（分类A在XX时间段内被使用，B在XX时间段内被使用，只是此时XX正好相同而已）。

因此此处仅处理跨时间情况，可将内容按行即分类进行绘制，这样在插入内容部件时，可以简化很多计算。

{
 // 右侧内容
 _rednerContent: function () {
 this._contentEl.innerHTML = '';
 var i = 0,
 node = document.createElement('div'),
 row;
 node.className = 'ep-weekcalendar-content-row';
 while (i < this._categoryData.length) {
 row = node.cloneNode();
 row.setAttribute('data-i', i);

 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放置在合适的位置。

利用Javascript开发一个二维周视图日历(3)

相关推荐