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

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

结构如上，实现代码就不用展示了。

绘制实现

初始好了必要的结构，我们接着进行日历的绘制工作。

分类绘制

首先要处理的是分类，周视图中，一周的天数是固定的，确定好分类才能绘制出主体部分的网格。

对于分类，暂时考虑如下必要数据格式：

{
 id: 'cate-1', // 分类ID
 name: '法拉利', // 分类名称
 content: '苏E00000' // 分类的具体描述
}

实现如下：

{
 // 设置分类数据
 setCategory: function (data) {
 if (!(data instanceof Array)) {
 this.throwError('分类数据必须是一个数组');
 return;
 }
 this._categoryData = data;

 // 绘制分类
 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', {
 categoryEl: cateEl,
 titleEl: titleEl,
 contentEl: contentEl
 });
 }
}

上面通过设置分类数据 setCategory 作为入口，调用绘制分类方法，其中还调用了 _renderChanged 此方法用于重新绘制日历的可变部分，如标题、日期和其中的内容，会在之后进行介绍。

日期绘制

上面已经准备好了分类轴，还需要绘制出日期轴，对于周视图而言，一周的实现就非常简单了，根据一周的开始日期，依次渲染7天即可。注意在绘制过程中提供日期的必要信息给相应事件，一遍使用者能够在事件中进行个性化处理。

{
 // 渲染日历的星期
 _renderWeeks: function () {
 this._weeksEl.innerHTML = '';
 var i = 0,
 currDate = this._startDate.clone(),
 node = document.createElement('div'),
 week;
 node.className = 'ep-weekcalendar-week';
 // 单元格列作为下标记录日期
 this._dateRecords = [];
 while (i++ < 7) {
 // 更新记录日期
 this._dateRecords.push(currDate.clone());
 week = node.cloneNode(true);
 this._renderWeek(currDate, week);
 currDate.add(1, 'day');
 }
 // 切换日期 需要重绘内容区域
 this._rednerContent();
 },
 _renderWeek: function (date, node) {
 var dateText = date.format('YYYY-MM-DD'),
 day = date.isoWeekday();
 if (day > 5) {
 node.className += ' weekend';
 }
 if (date.isSame(this.today, 'day')) {
 node.className += ' today';
 }
 node.setAttribute('data-date', dateText);
 node.setAttribute('date-isoweekday', day);
 var ev = this.fire('dateRender', {
 // 当前完整日期
 date: dateText,
 // iso星期
 isoWeekday: day,
 // 显示的文本
 dateText: '周' + this._WEEKSNAME[day - 1] + ' ' + date.format('MM-DD'),
 // classname
 dateCls: node.className,
 // 日历el
 el: this.el,
 // 当前el
 dateEl: node
 });
 // 处理事件的修改
 node.innerHTML = ev.dateText;
 node.className = ev.dateCls;
 this._weeksEl.appendChild(node);
 this.fire('afterDateRender', {
 // 当前完整日期
 date: dateText,
 // iso星期
 isoWeekday: day,
 // 显示的文本
 dateText: node.innerHTML,
 // classname
 dateCls: node.className,
 // 日历el
 el: this.el,
 // 当前el
 dateEl: node
 });
 }
}

转载注明出处：http://www.heiqu.com/148.html

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

相关推荐