最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简易日历,毕竟也是第一次造日历这种轮子,所以这里记录下我当时的一些思路,一来做一些技术总结,二来也是给像我这样第一次做日历的前端工程师一些参考。

先来一起看下日历的界面:

日历功能包括:1.显示当前月、上个月后几天、下个月前几天的日期,2.切换到上个月,3.切换到下一个月,4.回到今天,5.点击某天弹出当天的年月日(如2014-10-26),同时不在当前月的日期以更淡的颜色与当前月进行一个区分。

因为使用avalon进行实现,了解MVVM思想的人都知道,mvvm不操作dom,这是框架内部做的事情,而我们仅仅要做的是操作Mode层,也即数据层。

这里我用一个数组存储当前一个月的所有日期对象,每一天就是一个对象,这个对象包括年,月,日,时间戳,是否隶属于当前月等。如下所示:

var caleadar = [
{
year : 2014, // 年份
month : 10, // 月份
date : 1, // 日
time : 1414771200000, // 时间戳
flag : false // 是否隶属于当前月
},
{
year : 2014,
month : 10,
date : 2,
time : 1414911123564,
flag : true
},
.....
];

得到这样一个保存当前月所有信息的数组之后,因为此时caleadar是一个一维数组,而日历是每7天一行,所以这里要将caleadar转化为一个二维数组,每一个子数组里面保存的是一周的日期信息,这样就可以利用avalon的动态模板引擎进行双重模板渲染,这样一个日历就出来了。

利用getWeeks函数我们就可以得到存储有当前月所有日期信息的数组,如下:

function getWeeks(ooo) {
var dateObj = new Date();
var year = ooo.getFullYear();
var month = ooo.getMonth(); //得到今天是几月(0 ~ 11)
var date = ooo.getDate(); //得到今天是几号 (1 ~ 31)
//var cur = new Date(year, month, date);
var cur = new Date(year, month, 1);
cur.setMonth(month + 1); //改为下一个月,
cur.setDate(0);//由于日期是1 ~ 31, 0则是退到上一个月的最后一天,于是得到这个月的总天数
var num = cur.getDate();
var next = 6 - cur.getDay();
var dates = avalon.range(1, num + 1);
dates = dates.map(function(d) {
return dateObj.getFullYear() === year &&
dateObj.getMonth() === month &&
dateObj.getDate() === d ? {
year: year,
month: month,
date: d,
isToday: true,
flag: true,
time: new Date(year, month, d) - 0
} : {
year: year,
month: month,
date: d,
flag: true,
time: new Date(year, month, d) - 0
};
});
cur.setMonth(month);
cur.setDate(1); //得到当月的第一天
var prev = cur.getDay(); //0 ~ 6
cur.setDate(date); //还原
//补上上一个月的日期
if (month - 1 < 0) {
year--;
month = 11;
for (var i = 0; i < prev; i++) {
var curr = new Date(year, month, -1 * i);
dates.unshift({
year: year,
month: month,
date: curr.getDate() + 1,
flag: false,
time: curr - 0
})
}
} else {
for (i = 0; i < prev; i++) {
curr = new Date(year, month, -1 * i);
dates.unshift({
year: year,
month: month - 1,
date: curr.getDate(),
flag: false,
time: curr - 0
})
}
}
//补上下一个月的日期
if (month + 1 == 12) {
year++;
month = 0;
for (i = 0; i < next; i++) {
curr = new Date(year, month, i + 1);
dates.push({
year: year,
month: month,
date: curr.getDate(),
flag: false,
time: curr - 0
})
}
} else {
for (i = 0; i < next; i++) {
curr = new Date(year, month + 1, i + 1);
dates.push({
year: year,
month: month + 1,
date: curr.getDate(),
flag: false,
time: curr - 0
})
}
}
var ret = [];
while (dates.length) {//每行七个分组
ret.push(dates.splice(0, 7));
} return ret; //一个二维数组
}

这里ooo是getWeeks的唯一参数,它是一个Date对象。

获取到数据之后,直接在html里面进行数据渲染,日历就出来了,相关日历html如下:

<div class="game_calendar" ms-controller="caleadarID">
<div class="current_info">
<button type="button" ms-click="backToToday">today</button>
<button type="button" ms-click="prevMonth">prev</button>
<button type="button" ms-click="nextMonth">next</button>
<span>{{cyear}}年{{cmonth + 1}}月</span>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="week_title">
<tbody>
<tr valign="bottom">
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</tbody>
</table>
<table width="100%" cellpadding="0" cellspacing="1" class="calendar_main">
<tbody>
<tr ms-repeat-el="calendar">
<td ms-class="day_style:elem.flag==true" valign="top" ms-repeat-elem="el" ms-click="alert(elem)">
<div class="day_mouse">
<div class="day_no" ms-if="elem.isToday!=true">{{elem.date}}</div>
<div class="day_no" ms-class="today:elem.isToday==true" ms-if="elem.isToday==true">今天</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

我们可以看到,模板里面运用了大量的以ms-开头的绑定属性和{{}}插值表达式,有的是用来渲染样式,有的是用来绑定事件。这样,一个日历就出来了。

接下来就是日历的切换功能了,实际上上面三个功能本质都是一样,只要传入getWeeks的参数不同返回不同的数组信息就行。因此在程序初始化是我们先保存几个变量,如下:

var dateObj = new Date();
vm.calendar = _private.getWeeks(dateObj); //存储当月日历
vm.cyear = dateObj.getFullYear(); //当前年份
vm.cmonth = dateObj.getMonth(); //当前月份
vm.cdate = dateObj.getDate(); //当前日

接下来就是相关处理逻辑:

//上一个月
vm.prevMonth = function () {
vm.cdate = 1;
--vm.cmonth;
if (vm.cmonth < 0) {
vm.cyear--;
vm.cmonth = 11;
}
_private.change();
}; //下一个月
vm.nextMonth = function () {
vm.cdate = 1;
++vm.cmonth;
if (vm.cmonth == 12) {
vm.cyear++;
vm.cmonth = 0;
}
_private.change();
}; //回到今天
vm.backToToday = function () {
var dateObj = new Date();
vm.cyear = dateObj.getFullYear();
vm.cmonth = dateObj.getMonth();
vm.cdate = dateObj.getDate();
_private.change();
};

改变当前年、月、日后,我们只需要调用change函数来改变caleadar数组,change函数如下:

vm.caleader = _private.getWeeks(new Date(vm.cyear, vm.cmonth, vm.cdate));

这样,一个简易日历就实现了,从头到尾,我们没有操作一行dom,完全的model操作,是不是很爽?

这里为了让大家看到更好的日历效果,附上日历源码,欢迎下载,有任何疑问欢迎留言!

caleadar.zip

使用MVVM框架avalon.js实现一个简易日历的更多相关文章

  1. avalon.js实现一个简易日历

    使用MVVM框架avalon.js实现一个简易日历   最近在做公司内部的运营管理系统,因为与日历密切相关,同时无需触发条件直接显示在页面上,所以针对这样的功能场景,我就用avalon快速实现了一个简 ...

  2. 使用 js 实现一个简易版的 vue 框架

    使用 js 实现一个简易版的 vue 框架 具有挑战性的前端面试题 refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 201 ...

  3. 轻量级前端MVVM框架avalon - 初步接触

    迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...

  4. MVVM框架avalon在兼容旧式IE

    迷你MVVM框架avalon在兼容旧式IE做的努力 当前标签: avalon 共3页: 1 2 3 下一页  迷你MVVM框架avalon在兼容旧式IE做的努力 司徒正美 2014-03-13 11: ...

  5. 前端MVVM框架avalon - 模型转换1

    轻量级前端MVVM框架avalon - 模型转换(一) 接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: fun ...

  6. 使用 js 实现一个简易版的模版引擎

    使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...

  7. 使用 js 实现一个简易版的 drag & drop 库

    使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...

  8. 使用 js 实现一个简易版的动画库

    使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...

  9. 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序

    使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...

随机推荐

  1. Jenkins+CCNET的另类部署图

    最近公司的CI系统升级,从CCNET换成Jenkins进行搭建,原因是Jenkins支持所有语言,不再是单一的dotnet语言支持,并且以节点的形式能做分布式自动构建,非常节省配置成功. 而且从MSB ...

  2. hdu 5269 trie树

    现场想到了lowbit(X xor Y)=X和Y从右向左数,对应相同的数的个数+1...然而并没有想到接下来用trie树 然后就想排个序试试...然后就整个人都不好了啊摔 sol:用trie,一边in ...

  3. ubuntu14.04 配置中文输入法

    ubuntu14.04自带中文输入法,只要配置就可以了. 1.安装中文支持 System Settings -->  Language Support 点击 install/remove lan ...

  4. SLF4J的好处

    原来我们使用log4j去打印日志,如果我们要更改日志记录器,比如用comms-Logging,那我们在代码里面还要改每个类的引用包,但是如果用slf4j的话只要在配置的时候改下,代码完全用slf4j的 ...

  5. 《JavaScript权威指南》学习笔记 第一天。

    这是零零散散的笔记,作为自己看书打demo的笔记.不足为各位学习,留作自己复习知识点备用. 1.检测对象中某个属性存在不存在: <script> // in 运算符 //不管是对象的自有属 ...

  6. angular state和stateParams

    angular ui-route通过路由传递参数 发送ctrl var model = { data: positionid }; $state.go('app.position.publish', ...

  7. java编程思想-java中的并发(二)

    二.共享受限资源 有了并发就可以同时做多件事情了.但是,两个或多个线程彼此互相干涉的问题也就出现了.如果不防范这种冲突,就可能发生两个线程同时试图访问同一个银行账户,或向同一个打印机打印,改变同一个值 ...

  8. 在JavaScript中,arguments是对象的一个特殊属性。

    arguments对象 function函数的内置参数的"数组"/"集合":同时arguments对象就像数组,但是它却不是数组. 常用属性: 1.length ...

  9. 分页进阶--ajax+jquery+struts2

    按照上次的分页逻辑,分页查询的业务大概需要几个“零件”:1.当前页:2.总页数:3.跳转页.后端需要处理的是:按照传送过来请求的页码返回相应地数据,并且接受初始化参数的请求:总页码.第一页的数据. 使 ...

  10. js 对象属性复制到另一个对象

    var obj={a:1,b:2,c:3} var newObj={};for(var i in obj){newObj[i]=obj[i];}console.log(newObj);