angular中uicalendar怎么用
这篇文章将为大家详细讲解有关angular中ui calendar怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
专注于为中小企业提供成都网站设计、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业绛县免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。
官方地址：http://angular-ui.github.io/ui-calendar/
fullcalendar 和ui calendar包安装我就不介绍了。自行百度下。
包安装好后，添加路径引用
本次开发环境angular1.x
调用
在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中uicalendar怎么用
本文链接：http://myzitong.com/article/jphech.html