前言
本文给大家介绍了Javascript开发二维周视图日历的相关内容，即之前实现了一个月视图日历，我们今天来实现一个二维周视图的日历。
以下进行分析其中的关键部分。
结构准备
不同之处在于其在日历的基础上还有一个分类轴，用于展示不同的类目，主要用于一周内的日程安排、会议安排等。
二维则和之前单独的有所不同，二维日历再切换日期时不用全部重新渲染，分类是不用变的，仅仅改变显示的日期即可。
而且由于是二维的，插入的内容必定是同时属于一个分类和一个时间段的，内容肯定是可以跨越时间(即日期轴)的，因此不能直接将插入的内容像开始的日历一样直接放置在日历的格子中。而要进行单独的处理。
另外，只要分类不变，日期和分类构成的网格是不用重绘的。
考虑到以上情况，插入内容的和网格是需要分开来的，我将现成的日历弄成一下3D效果示意:
即插入内容的层是单独放置在时间和分类构成的网格上方的。
基于以上分析，先构建如下基本结构:
<div class="ep-weekcalendar border">
<!-- 头部 -->
<div class="ep-weekcalendar-header">
<div class="ep-weekcalendar-header-left"></div>
<div 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>
</div>
<div class="ep-weekcalendar-header-right"></div>
</div>
<!-- 主体 -->
<div class="ep-weekcalendar-body">
<!-- 分类区域 -->
<div class="ep-weekcalendar-category-area">
<div class="ep-weekcalendar-category-header">
<span class="ep-weekcalendar-category-title">车辆</span>
</div>
<ul class="ep-weekcalendar-category-list">
</ul>
</div>
<!-- 内容区域 -->
<div class="ep-weekcalendar-time-area">
<!-- 每周日期渲染区域。切换日期时重新绘制内容 -->
<div class="ep-weekcalendar-weeks"></div>
<div class="ep-weekcalendar-main">
<!-- 分类和内容构建的网格区域，仅在分类改变时进行调整 -->
<div class="ep-weekcalendar-grid"> </div>
<!-- 可插入任意内容的区域，日期切换时清空，根据使用需求插入内容 -->
<div class="ep-weekcalendar-content"></div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="ep-weekcalendar-body"></div>
</div>
内容版权声明：除非注明，否则皆为本站原创文章。