zoukankan      html  css  js  c++  java
  • 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);虽然也解决了问题,但是上面的问题并没有解惑。。。欢迎高手指点!

    以上是我在使用过程中遇到的一些问题。。。希望能帮到同样遇到问题的朋友们!自己记录一下,以备后用!

  • 相关阅读:
    5.2基础标签学习
    6.15ajax选房子
    6.15ajax写数据库的增删改查
    [Ext JS 4] 实战之Grid, Tree Gird 添加按钮列
    DOM4J 读取XML配置文件进行数据库连接
    Bit Map解析
    图像像素操作
    九度OJ 1025 最大报销额(01背包)
    MYSQL :逗号分隔串表,分解成竖表
    interrupt & storage & DMA
  • 原文地址:https://www.cnblogs.com/teamblog/p/6287316.html
Copyright © 2011-2022 走看看