利用Javascript开发一个二维周视图日历_javascript技巧

前言

本文给大家介绍了Javascript开发二维周视图日历的相关内容，即之前实现了一个月视图日历，我们今天来实现一个二维周视图的日历。

以下进行分析其中的关键部分。

结构准备

不同之处在于其在日历的基础上还有一个分类轴，用于展示不同的类目，主要用于一周内的日程安排、会议安排等。

二维则和之前单独的有所不同，二维日历再切换日期时不用全部重新渲染，分类是不用变的，仅仅改变显示的日期即可。

而且由于是二维的，插入的内容必定是同时属于一个分类和一个时间段的，内容肯定是可以跨越时间(即日期轴)的，因此不能直接将插入的内容像开始的日历一样直接放置在日历的格子中。而要进行单独的处理。

另外，只要分类不变，日期和分类构成的网格是不用重绘的。

考虑到以上情况，插入内容的和网格是需要分开来的，我将现成的日历弄成一下3D效果示意:

即插入内容的层是单独放置在时间和分类构成的网格上方的。

基于以上分析，先构建如下基本结构:

<p class="ep-weekcalendar border">
 <!-- 头部 -->
 <p class="ep-weekcalendar-header">
 <p class="ep-weekcalendar-header-left"></p>
 <p class="ep-weekcalendar-header-center">
 <span class="ep-weekcalendar-header-btn ep-weekcalendar-header-btn-prev"></span>
 <span class="ep-weekcalendar-title">2017年12月04日 - 10日</span>
 <span class="ep-weekcalendar-header-btn ep-weekcalendar-header-btn-next"></span>
 </p>
 <p class="ep-weekcalendar-header-right"></p>
 </p>
 <!-- 主体 -->
 <p class="ep-weekcalendar-body">
 <!-- 分类区域 -->
 <p class="ep-weekcalendar-category-area">
 <p class="ep-weekcalendar-category-header">
 <span class="ep-weekcalendar-category-title">车辆</span>
 </p>
 <ul class="ep-weekcalendar-category-list">
 </ul>
 </p>
 <!-- 内容区域 -->
 <p class="ep-weekcalendar-time-area">
 <!-- 每周日期渲染区域。切换日期时重新绘制内容 -->
 <p class="ep-weekcalendar-weeks"></p>
 <p class="ep-weekcalendar-main">
 <!-- 分类和内容构建的网格区域，仅在分类改变时进行调整 -->
 <p class="ep-weekcalendar-grid"> </p>
 <!-- 可插入任意内容的区域，日期切换时清空，根据使用需求插入内容 -->
 <p class="ep-weekcalendar-content"></p>
 </p>
 </p>
 </p>
 <!-- 底部 -->
 <p class="ep-weekcalendar-body"></p>
</p>

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

绘制实现

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

分类绘制

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

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

实现如下：

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

日期绘制

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

网格和内容

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

网格

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

内容

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

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

如果一定要实现跨行跨列的情况，直接将内容绘制成一整块元素即可，但是在点击事件和插入内容部件时，需要同时计算对应的分类和日期时间。

难点实现

内容部件插入

我们实现这个二维周视图日历的主要目的就是要支持插入任意的内容，上面已经准备好了插入内容的dom元素，这里要做的就是将数据绘制成dom放置在合适的位置。

考虑必要的内容部件数据结构如下：

由于上面在内容区域是直接按照分类作为绘制的，因此拿到数据后，对应的分类就已经存在了。重点要根据指定的开始和结束时间计算出开始和结束位置。

考虑如下：

• 考虑响应式，位置计算按照百分比计算

• 一周的总时间是固定的，开始日期时间和这周开始日期时间的差额占总时间的百分比即开始位置的百分比

• 结束日期时间和开始时间的差额占总时间的百分比即为结束时间距离最左侧的百分比

• 注意处理开始和结束时间溢出本周的情况

因此关于位置计算可以用如下代码处理：

上面就拿到了一个数据所对应的开始位置和结束位置。基本上是已经完成了，但是还需要再处理一个情况：相同分类下的时间冲突问题。

考虑以如下方式进行：

• 没添加一个就记录下其数据

• 新增的如果和当前分类下已有的存在时间重叠，则认为冲突。

实现如下：

完成以上两步就可以往我们的内容区域中插入了

点击事件和范围选择

此控件不仅用于结果展示，还要可用于点击进行添加，需要处理其点击事件，但是由于要展示内容，内容是覆盖在分类和日期构成的网格之上的，用户的点击是点击不到网格元素的，必须要根据点击的位置进行计算来获取所点击的日期和所在分类。

同时，由于展示的部件都是时间范围的，因此点击返回某天和某个分类是不够的，还需要能够支持鼠标按下拖动再松开，来直接选的一段时间。

考虑到以上需求，点击事件不能直接使用 click 来实现，考虑使用 mousedown 和 mouseup 来处理点击事件，同时需要在 mousemove 中实时给出用户响应。

此过程要注意的问题是：mousedown 必须绑定在日历上，而 mouseup 和 mousemove 则不能绑定在日历上，具体原因已经写在上面代码注释中了。

另外需要注意，由于范围点击选择使用了 mousedown 和 mouseup 来模拟，那么日历内容区域中插入的数据部件的点击事件也要用 mousedown 和 mouseup 来模拟，因为 mouseup 触发比 click 早，如果使用 click ，会导致先触发日历上的日期点击或日期范围点击。

使用

此日历实现基于一个控件基类扩展而来，其必要功能仅为一套事件机制，可参考实现一套自定义事件机制

实测一下效果吧：

以上就是本篇文章的所有内容，希望会给大家带来帮助！！

相关推荐：

JavaScript实现表格滚动分页教程

如何利用JavaScript的%做隔行换色

JavaScript执行顺序分析

以上就是利用Javascript开发一个二维周视图日历_javascript技巧的详细内容，更多请关注Gxl网其它相关文章！