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

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

fullcalendar 和ui calendar包安裝我就不介紹了。自行百度下。

包安裝好后，添加路徑引用

本次開(kāi)發(fā)環(huán)境angular1.x

調(diào)用

<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources" calendar="myCalendar"></div>

在controller中配置參數(shù)

/* config object */
$scope.uiConfig = {
　　calendar: {
　　　　height:..,//容器高度
　　　　editable:..,//是否可編輯
　　　　header: {
　　　　　　right: '',//右邊操作按鈕
　　　　　　center: 'title',
　　　　　　left: '',//左邊操作按鈕

　　　　},

　　}

};

$scope.eventSources = [$scope.events];

這是一些基礎(chǔ)配置，其他的請(qǐng)根據(jù)需求配置

下面來(lái)談?wù)勎以谑褂弥杏龅降囊恍﹩?wèn)題，首先要從需求開(kāi)始：

1.產(chǎn)品需求：每天事件要按字段“x”排序。

2.要根據(jù)月篩選查看不同月的視圖數(shù)據(jù)。

首先來(lái)解決第一個(gè)問(wèn)題，查看fullcalendar有沒(méi)有排序功能，中文百度了半天，好吧，放棄了。。。用英文搜索，終于找到，在新版的fullcalendar提供了排序字段，默認(rèn)是‘title';于是重新安裝了fullcalendar,手動(dòng)設(shè)置排序方法：在數(shù)據(jù)集中增加自定義排序字段，如{title:'111',sort:'22'},然后在$scope.urConfig.calendar中添加eventOrder:'sort'就可以了，很開(kāi)心,第一個(gè)問(wèn)題解決了！

第2個(gè)問(wèn)題，根據(jù)時(shí)間查看不同月份視圖,往eventSources里扔不同月份的數(shù)據(jù)集合不就行了？試了一下，額，視圖不變化。。。又開(kāi)始了英文搜索之旅。。。
終于找到了一個(gè)帖子，方法如下：

1.在controller中注入uiCalendarConfig，然后uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', calendarMonth);calendarMonth是需要加載顯示的月份，但是調(diào)用之后uiCalendarConfig.calendars.myCalendar is undefined...

解決方法：

$timeout(function(){

　　uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', calendarMonth);

});

到了這一步，項(xiàng)目要求的基本功能夠已實(shí)現(xiàn)了。

開(kāi)始優(yōu)化：

1.把顯示界面調(diào)成中文, 在配置config中添加lang:'zh-cn'或locale:'zh-cn',如果還不行，請(qǐng)升級(jí)你的ui calendar包

2.視圖加載很緩慢,又英文搜索了很長(zhǎng)時(shí)間。。。吐槽一下。國(guó)人沒(méi)遇到過(guò)這類(lèi)問(wèn)題嗎，中文搜索根本搜不到。。。，最后看到一個(gè)帖子：

將$scope.eventSources = [$scope.events];改成$scope.eventSources = []，

$scope.events通過(guò)請(qǐng)求返回接收后uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', $scope.events);加載，試了一下。nice,緩慢問(wèn)題搞定。。。但是新問(wèn)題來(lái)了，視圖不會(huì)把我上次的數(shù)據(jù)清除，會(huì)造成重復(fù)數(shù)據(jù)！

最后換成了$scope.eventSources.push($scope.events);雖然也解決了問(wèn)題，但是上面的問(wèn)題并沒(méi)有解惑。。。歡迎高手指點(diǎn)！

以上是我在使用過(guò)程中遇到的一些問(wèn)題。。。希望能幫到同樣遇到問(wèn)題的朋友們！自己記錄一下，以備后用！

這篇angular中ui calendar的一些使用心得(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。