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 Feed获取，则可以使用其他选项 - 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/

最好的问候！
的Krzysztof

Answer 2

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

首先，datepicker将一个JS Date对象存储在ng-model中，你可以$watch它并从中获取当前年/月/日

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

现在，您可以查询数据库以获取所选月份的所有活动

此外，您可以使用日期选择器的mode（显示您在日/月/年模式中查看日期选择器，您在选项对象中进行设置）。

datepickerMode C（默认值：日） - 日期选择器的当前模式（日|月|年）。可用于在特定模式下初始化日期选择器。

使用此属性，您可以查询事件的月份，年份或年份。

angularjs-bootstrap-calendar上加载了大量事件

2 个答案: