angularjs-ui-calendar日历插件的使用

公司要求使用angular-ui-calendar做移动端的一个日历模块,之前对angular的接触也不是很多,刚开始看了看真是头都大了,不过现在搞清楚之后感觉真的是so easy。分享自己的一些使用经验。

1.首先,领导给了我一个地址http://angular-ui.github.io/ui-calendar/让我先研究,说是用这个套到移动端的项目里。

2.说说我后来了解到的吧,angular-ui-calendar是基于fullcalendar的,它的功能很强大,里面有好多依赖的插件,最显著的有angular.js、jquery.js,这两个js我觉得不应该是“互斥”的吗,如果使用了jquery就不应该使用angular,或许是我学识太浅,不懂其中的道理。

3.整理了一下,拆出了一个最简化的日历,https://github.com/charissa666/angularjs-ui-calendar。

angularjs-ui-calendar日历插件的使用_第1张图片

这是用到的js文件,强调一点fullcalendar.js要放在moment.js下面,不然会报下面的错

angularjs-ui-calendar日历插件的使用_第2张图片

下面是css文件,主要是fullcalendar.css,其他的样式自己再单独写。

angularjs-ui-calendar日历插件的使用_第3张图片

主要的js 文件内容 

angularjs-ui-calendar日历插件的使用_第4张图片

{title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false}

new Date(y,m,d + 1,19,0),+1表示当前日期加一天,后面的参数是小时、分。

其他的参数自己试试就可以知道是什么意思了。

angularjs-ui-calendar日历插件的使用_第5张图片

这个日历插件终于算是入门了,头一次研究angular的框架,继续努力吧。



你可能感兴趣的:(angularjs-ui-calendar日历插件的使用)