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 相关文章推荐
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
jquery中获取select选中值的代码
Jun 27 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 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
php中jpgraph类库的使用介绍
2013/08/08 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
Python中itertools模块用法详解
2014/09/25 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
Python计算IV值的示例讲解
2020/02/28 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
2014年大班元旦活动方案
2014/02/26 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
班级学习计划书
2014/04/27 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
2014年安全生产责任书
2014/07/22 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
Java SSM配置文件案例详解
2021/08/30 Java/Android
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android