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的一些使用心得的更多相关文章
- 开始学习Angular Mobile UI
介绍 Mobile AngularUI 可以让你使用Twitter Booostrap和Angular JS来开发混合移动App和桌面应用程序. 下面是是一些贯穿整个项目的步骤,我强烈的建议你去继续阅 ...
- angular中的MVVM模式
在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(What ...
- angular中$cacheFactory缓存的使用
最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory( ...
- 阿里云 Angular 2 UI框架 NG-ZORRO介绍
说明: Angular2出来后,一直想找个基于Angular2的前端后台管理框架,但一直没有找到比较适合的.前段时间在Angular官网资源无意之间看到NG-ZORRO,NG-ZORRO由阿里计算平台 ...
- 【响应式编程的思维艺术】 (5)Angular中Rxjs的应用示例
目录 一. 划重点 二. Angular应用中的Http请求 三. 使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 3.2 常见的操作符 四. 冷热Observable的两种典型场景 4 ...
- angular 2+ 变化检测系列三(Zone.js在Angular中的应用)
在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...
- Angular中ui-grid的使用详解
Angular中ui-grid的使用 在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验.最近,项目中用到的表格特别多,而且表格的列数和行数也超多.为了让用户浏览更爽,产品经理提出,当表格 ...
- Angular中ui-select的使用
Angular中ui-select的使用 最近工作一直很忙,没有时间整理知识,前几天项目中需要用到angular-ui-select,实现下拉框快速过滤效果,今天有时间研究了一下,终于搞明白了. 一. ...
- Angular第三方UI组件库------ionic
一.Angular UI组件库 ------------ionic 1. 官网:https://ionicframework.com 文档:https://ionicframework.com/d ...
随机推荐
- PullToRefreshScrollView的上拉加载、下拉刷新
eclipse中的项目: //注意:此刷新功能是使用的第三方的PullToRefreshScrollView,因此需要导入第三方library作为依赖 步骤:导入第三方library,依赖:点击你的应 ...
- GameUnity 2.0 文档(二) 纸片人系统
本想快速的 把 之前写的类库,一股脑的 给大家 ,但又觉得,如 msdn那样的 文档,并不能给 初学者 所能接受. 因为 大部分人 对 api 还是比较陌生,也不愿意 去研究和组合. 那么 今天我选用 ...
- java 工作内存
所谓线程的“工作内存”到底是个什么东西?有的人认为是线程的栈,其实这种理解是不正确的.看看JLS(java语言规范)对线程工作 内存的描述,线程的working memory只是cpu的寄存器和高速缓 ...
- apache.commoms.digester3 解析xml文件
Technorati 标签: java,xml,digester,xmlrule,FromXmlRulesModule 1 简介 java解析xml,就个人所知有3种方法DOM.SAX和Digeste ...
- Php和httpd.conf的配置
http://www.cnblogs.com/homezzm/archive/2012/08/01/2618062.html http://book.51cto.com/art/201309/4096 ...
- Android面试经验2
1,android如何更换主题: 2,如何设计软件: 3,代码中用到那些设计模式: 4,c++和java有那些不同: 一,指针: 二,多重继承: 三,数据类型和类: 四,自动内存管理: 五,操作符重载 ...
- jvm attach
http://ayufox.iteye.com/blog/655761 管道通信
- emacs search, 讲的很清楚。
默认情况下,Emacs采用了一种很待殊的”增量搜索”的功能,虽然它与我们常用的搜索方法在操作习惯上有很大的不同,但习惯后确实是十分的方便. 要让Emacs开始执行搜索,可以按C-s或C-r,前者是从光 ...
- UIView 视图切换
UIView之间常用视图之间切换方式 转载自:http://www.jianshu.com/p/0d53f9402c07 在平时编写代码的过程中,页面之间的跳转可以说就和MVC模式一样是开发必须的.但 ...
- ms08_067利用过程
进入msf. show exploits. use exploit/windows/smb/ms08_067_netapi. show playloads. set PLAYLOAD windows/ ...