本文就為大家帶來一篇angular中ui calendar的一些使用心得(推薦)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
ui calendar是封裝fullcalendar的一個angular指令外掛
官方網址：http://angular-ui.github.io/ui-calendar/
#fullcalendar 和ui calendar套件安裝我就不介紹了。自行百度下。
套件安裝好後，新增路徑參考
本次開發環境angular1.x
呼叫
<p ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources" calendar="myCalendar"></p>
在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);的月份，但是調用之後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的一些使用心得的詳細內容。更多資訊請關注PHP中文網其他相關文章！
