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 ...
随机推荐
- 转载 Deep learning:六(regularized logistic回归练习)
前言: 在上一讲Deep learning:五(regularized线性回归练习)中已经介绍了regularization项在线性回归问题中的应用,这节主要是练习regularization项在lo ...
- 快学Scala-第六章 对象
知识点: 1.单例对象 使用object语法结构达到静态方法和静态字段的目的,如下例,对象定义某个类的单个实例,包含想要的特性,对象的构造器在该对象第一次被使用时调用. object Account{ ...
- PullToRefreshListView上拉加载、下拉刷新
说明:此项目使用studio完成的.需要导入library作为依赖,使用了xuitls获得网络请求.使用Pull解析了XML eclipse中的项目: //注意:此刷新功能是使用的第三方的PullTo ...
- ajax遇到的问题
今天做了个小小的实验,用ajax XMLHttpRequest对象读取服务器上的txt文件里的内容,展示出来 直接把html文件放在桌面用浏览器打开,没有反应,部分代码如下: function oHt ...
- lucene4.7 分页
转载自http://my.oschina.net/MrMichael/blog/220782 我 们先来看下下面的问题,现在我们的索引里有2亿多的数据,那么现在的需求是,把索引里的全部数据,读取然后写 ...
- java 文件字节输入流
Example10_4.java import java.io.*; public class Example10_4 { public static void main(String args[]) ...
- HDU 2668 Daydream
用一个队列来维护 每次加入一个字符,如果字符没有在队列里,那么直接入队,并且检查更新队列大小. 如果加入的字符在队列里了,那么要一直弹出队首,直到弹出的字符和当前要插入的一样. #include< ...
- C++调用java
摘要: 1 java类生成c头文件和库文件 2 对于c/c++程序,启动时先启动jvm,然后获得对应的java类的对象和方法.然后正常使用. 最近正在做一个C/C++调用java的程序,这里说的调用j ...
- 创建 AngularJS 自定义过滤器,带自定义参数
Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...
- centos6.5下Zabbix系列之Zabbix安装搭建及汉化 (转)
最近在研究zabbix,在整理完成之后就有了写一下总结博客的想法,在我研究zabbix的时候给我很大帮助的是it你好,博客地址 http://itnihao.blog.51cto.com/他做的zab ...