angular中ui calendar的一些使用心得(推荐)
ui calendar是封装fullcalendar的一款angular指令插件
官方地址:http://angular-ui.github.io/ui-calendar/
fullcalendar 和ui calendar包安装我就不介绍了。自行百度下。
包安装好后,添加路径引用
本次开发环境angular1.x
调用
<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources" calendar="myCalendar"></div>
在controller中配置参数
/* config object */ $scope.uiConfig = { calendar: { height:..,//容器高度 editable:..,//是否可编辑 header: { right: '',//右边操作按钮 center: 'title', left: '',//左边操作按钮 }, } }; $scope.eventSources = [$scope.events];
这是一些基础配置,其他的请根据需求配置
下面来谈谈我在使用中遇到的一些问题,首先要从需求开始:
1.产品需求:每天事件要按字段“x”排序。
2.要根据月筛选查看不同月的视图数据。
首先来解决第一个问题,查看fullcalendar有没有排序功能,中文百度了半天,好吧,放弃了。。。用英文搜索,终于找到,在新版的fullcalendar提供了排序字段,默认是‘title';于是重新安装了fullcalendar,手动设置排序方法:在数据集中增加自定义排序字段,如{title:'111',sort:'22'},然后在$scope.urConfig.calendar中添加eventOrder:'sort'就可以了,很开心,第一个问题解决了!
第2个问题,根据时间查看不同月份视图,往eventSources里扔不同月份的数据集合不就行了?试了一下,额,视图不变化。。。又开始了英文搜索之旅。。。
终于找到了一个帖子,方法如下:
1.在controller中注入uiCalendarConfig,然后uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', calendarMonth);calendarMonth是需要加载显示的月份,但是调用之后uiCalendarConfig.calendars.myCalendar is undefined...
解决方法:
$timeout(function(){ uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', calendarMonth); });
到了这一步,项目要求的基本功能够已实现了。
开始优化:
1.把显示界面调成中文, 在配置config中添加lang:'zh-cn'或locale:'zh-cn',如果还不行,请升级你的ui calendar包
2.视图加载很缓慢,又英文搜索了很长时间。。。吐槽一下。国人没遇到过这类问题吗,中文搜索根本搜不到。。。,最后看到一个帖子:
将$scope.eventSources = [$scope.events];改成$scope.eventSources = [],
$scope.events通过请求返回接收后uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', $scope.events);加载,试了一下。nice,缓慢问题搞定。。。但是新问题来了,视图不会把我上次的数据清除,会造成重复数据!
最后换成了$scope.eventSources.push($scope.events);虽然也解决了问题,但是上面的问题并没有解惑。。。欢迎高手指点!
以上是我在使用过程中遇到的一些问题。。。希望能帮到同样遇到问题的朋友们!自己记录一下,以备后用!
这篇angular中ui calendar的一些使用心得(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 剑指Offer——编程题的Java实现
- Python中if __name__ == "__main__": 的作用
- 每周算法练习——大数的乘法问题
- Java基础-25(01)图形用户界面编程GUI
- 每周算法练习——n皇后问题
- dg broker配置的问题及分析 (r7笔记第22天)
- 备库搭建中的一波三折(r7笔记第21天)
- Java基础-25(02)图形用户界面编程GUI
- 每周算法练习——最近对问题
- Java基础-25(03)图形用户界面编程GUI
- 数据结构和算法——用动态规划求解最短路径问题
- 备库报警邮件的分析案例(一) (r7笔记第14天)
- 数据结构和算法——动态规划
- Java基础-25(05)图形用户界面编程GUI
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 28.opengl高级光照-法线贴图
- python抓取动态验证码,具体第几帧数的位置静态图片
- 在 Spring Security 中,我就想从子线程获取用户登录信息,怎么办?
- php自动加载
- 011.Nginx防盗链
- 012.Nginx负载均衡
- 013.Nginx动静分离
- 014.Nginx跨域配置
- 深入理解 FilterChainProxy【源码篇】
- matplotlib基础绘图命令之bar
- 使用 Github Actions 自动部署 Angular 应用到 Github Pages
- 路径中关于斜杠/和反斜杠 的区别
- Redis的高级特性与应用场景(二)
- Redis的高级特性与应用场景(一)
- 022.基于IT论坛案例学习Elasticsearch(一):Filter相关知识