angular中ui calendar的一些使用心得(推荐)


Posted in Javascript onNovember 03, 2017

ui calendar是封装fullcalendar的一款angular指令插件

官方地址:http://angular-ui.github.io/ui-calendar/

angular中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中ui calendar的一些使用心得(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
详解javascript高级定时器
Dec 31 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
vue实现登录拦截
Jun 29 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 #Javascript
基于ES6作用域和解构赋值详解
Nov 03 #Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 #Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 #Javascript
React-intl 实现多语言的示例代码
Nov 03 #Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 #Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
JavaScript 原型继承
2011/12/26 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
基于python绘制科赫雪花
2018/06/22 Python
python如何制作缩略图
2019/04/30 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
一文读懂Python 枚举
2020/08/25 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
干部培训自我鉴定
2014/01/22 职场文书
有关环保的标语
2014/06/13 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
Python 语言实现六大查找算法
2021/06/30 Python