首頁 > web前端 > js教程 > 主體

實例分享angular中ui calendar的一些使用心得

小云云
發布: 2017-12-28 10:21:30
原創
2554 人瀏覽過

本文就為大家帶來一篇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中不同的元件間傳值與通訊的方法

Angular4中顯示CSS樣式的範例程式碼

Angular實作行程功能(可新增及隱藏顯示內容)詳解

#

以上是實例分享angular中ui calendar的一些使用心得的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!