2

我正在从服务器中提取所有事件数据，并且由于要提取很多事件，因此 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 的一些不必要的调用。

4

2 回答 2

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/

于 2016-12-09T11:47:38.117 回答
0

你描述的功能是一种日期分页，虽然这个功能不是内置的（很遗憾，因为它听起来真的很有用），你可以通过一些少量的工作来实现你自己的

首先，日期选择器在 ng-model 中存储了一个 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 的当前模式（day|month|year）。可用于在特定模式下初始化日期选择器。

使用此属性，您可以查询一个月、一年或几年的事件。

于 2016-12-09T11:44:57.270 回答