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

恰年 技术开发 2017-12-15 21:31:59 349
摘要:这篇文章主要给大家介绍了关于利用Javascript如何开发一个二维周视图日历的相关资料,文中通过示例代码介绍的非常详细,对大家学习JavaScript或者工作具有一定的参考学习价值,JavaScript感兴趣的朋友们下面随着小编来一起学习学习吧。

这篇文章主要给大家介绍了关于利用Javascript如何开发一个二维周视图日历的相关资料,文中通过示例代码介绍的非常详细,对大家学习JavaScript或者工作具有一定的参考学习价值,JavaScript感兴趣的朋友们下面随着小编来一起学习学习吧。


前言

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

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

结构准备

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

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

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

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

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

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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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<code class="xhtml plain" style="font-family: Monaco,
版权声明

本文仅代表作者观点,不代表本站立场。

本文系作者授权本站发表,未经许可,不得转载。

相关推荐
优能自媒体系统采用独家首创的广告赞助模式,不仅适合于个人自媒体的广告投放,更加适合于团队自媒体人集体创作。仅需999元即可享受终生授权!远非市面上其他模板网站所能比拟。优能自媒体用过才说好!
优能cms 刚刚 优能广告
根据自己多年的产品经验,梳理了大部分APP都会用到的交互,并用Axure画出最简洁的实现步骤。如果你的上级希望你画带交互的APP原型或者需要演示给甲方客户看效果,可以把这篇文章收藏起来备用。
恰年 2017-12-25 839 APP 
这篇文章主要给大家介绍了关于利用Javascript如何开发一个二维周视图日历的相关资料,文中通过示例代码介绍的非常详细,对大家学习JavaScript或者工作具有一定的参考学习价值,JavaScript感兴趣的朋友们下面随着小编来一起学习学习吧。
恰年 2017-12-15 350 JavaScript 
在编写JavaScript代码的时候存在的一些方法和技巧,虽然有时候条条大路都通向罗马,但是也许总会有那么一条最短的路径可走。本文将一些都知道却不怎么用的小技巧分享给大家
恰年 2017-12-15 331 JavaScript 
文章排行
  • 日榜
  • 月榜