Large amount of events loaded on the angularjs-bootstrap-calendar

Question

I'm pulling in ALL my event data from my server and since I have a lot of events to pull, the angular-bootstrap-calendar takes a lot of time to load.

I was wondering if its possible to pull only a month's worth of data for the current view I'm in (month, week, day..I would hide the year view). As I change the view to the next month, I'd pull the data for that month only.

Right now, I pull ALL the data only once, when the calendar loads, but not sure how to pull the data when the view changes.

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

Good solution for me

Get year and month of view, send it to API, and only retrieve events for that year-month:

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>

I've also added logic to check if previous yyyy-mm is equal to current yyyy-mm to save some unnecessary calls to the API.

score 1 · Answer 1 · edited Jan 13 '21 at 20:23

If you grab your events as a json feed, you can use additional options - startParam and endParam. They can be used like this:

$('#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');
        }
      }
    });
  }
});

You can read more about those parameters here: https://fullcalendar.io/docs/event_data/events_json_feed/

score 0 · Answer 2 · answered Dec 09 '16 at 11:44

The functionality you describe is a sort of date pagination, although this functionality isn't built in (shame, because it sounds really useful), you can implement your own with some small amount of work

First, the datepicker stores a JS Date object inside the ng-model, you can $watch it and get the current year/month/day out of it

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

Now you can query your database to get all the event for your selected month

Also, you can utilize the datepicker's mode (showing wether you are viewing the datepicker in the day/month/year mode, you set it up inside the options object).

datepickerMode C (Default: day) - Current mode of the datepicker (day|month|year). Can be used to initialize the datepicker in a specific mode.

Using this property you can query a month, year or years of events.

Large amount of events loaded on the angularjs-bootstrap-calendar

2 Answers2