anglejs-bootstrap-calendarに大量のイベントがロードされました。

Question

私のサーバーからすべてのイベントデータを取得しています。私は多くのイベントを取得するため、角度ブートストラップカレンダーは負荷。

現在のビュー（月、週、日..私は年のビューを隠すだろう）に1ヵ月分のデータを取り込めるかどうかは疑問でした。次の月に表示を変更すると、その月のデータのみが引き出されます。

今のところ、カレンダーが読み込まれても、ビューが変更されたときにデータを取り込む方法がわからない場合は、すべてのデータを1回だけ取り込みます。

var urlapievents = $location.protocol() + "://" + $location.host() + "/api/events/" ; 
    $http.get(urlapievents).success(function(events) { 

ビューの私

取得年月のための良い解決策は、APIに送信し、そして唯一のその年の月のイベントを取得：

JS

vm.viewChangeClicked = function() { 

    var viewDateYearMonth = moment(vm.viewDate).format('YYYY-MM'); 

    var urlapieventsall = $location.protocol() + "://" + $location.host() + "/api/events/" + viewDateYearMonth ; 

    $http.get(urlapieventsall).success(function(events) { 
     vm.events = events.events; 
    }); 
}; 

html

<div class="col-md-6 text-center"> 
    <div class="btn-group"> 
    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'" ng-click="vm.cellIsOpen = false; vm.viewChangeClicked()">Month</label> 
    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'" ng-click="vm.cellIsOpen = false; vm.viewChangeClicked()">Week</label> 
    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'" ng-click="vm.cellIsOpen = false; vm.viewChangeClicked()">Day</label> 
    </div> 
</div> 

また、以前のyyyy-mmが現在のyyyy-mmと等しいかどうかを確認して、APIへの不要な呼び出しを保存するロジックを追加しました。この機能が内蔵されていないが（恥それは本当に便利に聞こえるので、）

Answer 1

あなたが記述機能は、日付のページネーションの一種である、あなたは仕事の一部に少量

まず使用して独自に実装することができ、 DatePickerの店はNG-モデル内部のJSのDateオブジェクトは、あなたがそれを$watch、それ今

$scope.modelDate = new Date() 
... 
$scope.$watch('modelDate', function(newDate, oldDate) { 
    newDate.getDay(); // 5 
    newDate.getMonth(); // 11 
    newDate.getYear(); // 116 
}) 

のうち、現在の年/月/日を得ることができ、あなたの選択のためのすべてのイベントを取得するには、データベースを照会することができます月

また、日付ピッカーのmodeを利用することもできます（日/月/年モードで日付ピッカーを表示していることをオプションオブジェクト内に設定していることを示しています）。

datepickerMode C（デフォルト：day） - datepickerの現在のモード（日|月|年）。特定のモードで日付ピッカーを初期化するために使用できます。

このプロパティを使用すると、月、年、年のイベントを照会できます。

Answer 2

イベントをjsonフィードとして取得する場合は、startParamとendParamのオプションを使用できます。彼らはこのように使用することができます：

$('#calendar').fullCalendar({ 
    events: function(start, end, timezone, callback) { 
    if (request) { 
     request.abort(); 
    }; 
    $.mobile.loading('show'); 
    request = $.ajax({ 
     type: "POST", 
     url: "../Services/Calendar/CalendarService.asmx/GetEvents", 
     cache: false, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     data: "{ dtStart: " + JSON.stringify(start) + ", dtEnd: " + JSON.stringify(end) + "}", 
     success: function(data) { 
     var events1 = []; 
     $(data.d).each(function() { 
      events1.push({ 
      title: this.Title, 
      start: this.Start, 
      end: this.End, 
      id: this.Id 
      }); 
     }); 
     callback(events1); 
     $.mobile.loading('hide'); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
     if (jqXHR.statusText == 'abort') { 
      $.mobile.loading('hide'); 
      return; 
     } else { 
      alert('There was an error'); 
      $.mobile.loading('hide'); 
     } 
     } 
    }); 
    } 
}); 

あなたがここでそれらのパラメータについての詳細を読むことができます：https://fullcalendar.io/docs/event_data/events_json_feed/

敬具！
Krzyszof