Currently, I am facing a challenge with loading all my event data from the server using angular-bootstrap-calendar. Due to the large volume of events, it is taking a considerable amount of time to load.
I am exploring the possibility of fetching only a month's worth of data based on the current view (month, week, day) without displaying the year. When switching to the next month, I would then retrieve data for that specific month.
At present, I fetch all the data during the initial calendar load, but I am unsure how to fetch data when switching views.
var urlapievents = $location.protocol() + "://" + $location.host() + "/api/events/" ;
$http.get(urlapievents).success(function(events) {
A possible solution:
Retrieve the year and month of the current view, send this information to the API, and fetch events only for that particular year-month:
Javascript:
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 have also implemented logic to compare previous yyyy-mm with current yyyy-mm to avoid unnecessary API calls.