加载在AngularJS-Bootstrap-Calendar上的大量事件

Question

我正在从服务器中拉出所有事件数据，并且由于我有很多事件需要拉，因此Angular-Bootstrap-Calendar需要很多时间来加载。

我想知道是否只能为我（一个月，一周，一天..我隐藏年份的视图）提取一个月的数据。当我将视图更改为下个月时，我将仅将数据提取。

现在，我只在日历加载时仅拉一次所有数据，但不确定视图更改时如何提取数据。

 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

如果您将事件作为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/

Answer 2

您描述的功能是一种日期分页，尽管此功能不是内置的（羞耻，因为听起来真的很有用），您可以用少量的少量实现自己的功能工作

首先，datepicker在NG模型中存储JS日期对象，您可以$watch并获得当前的年/月/天

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

现在您可以查询数据库以获取所选月份的所有事件

另外，您可以使用datePicker的mode（显示您是否正在以日/月/年模式查看datepicker，您可以在选项对象中进行设置）。

datePickermode C（默认值：天） - datepicker的当前模式（天|月|年）。可用于在特定模式下初始化datepicker。

使用此属性，您可以查询一个月，年或几年的活动。