populate events using angular $http

[PatrickRansom]

Awesome job on this. I'm new the Angular but I believe I've poked around enough to get the ajax request working that'll retrieve events from a mysql database via php script and return the events in json format. I'd appreciate a quick eye to see if this is the best way to accomplish this.

In main.js I added the following:

angular.module('mwl.calendar') .controller('MainCtrl', function ($scope, $modal, moment,$http) {

$scope.getData = function() {
    var startDate = encodeURIComponent( moment( $scope.calendarDay ).startOf( $scope.calendarView ).toISOString() );
    var endDate = encodeURIComponent( moment( $scope.calendarDay ).endOf( $scope.calendarView ).toISOString() );
    var getURL = "getschedule1.php?starts_at=" + startDate + "&ends_at=" + endDate;
    $http.get( getURL ).success(function (data) { $scope.events = data;})
};

$scope.calendarView = 'month';
$scope.calendarDay = new Date();
$scope.getData();

}

I did something similar in the mwlcalendar.js file:

controller: function($scope, $timeout, $locale, moment, $http) {

    $scope.control.prev = function() {
      $scope.currentDay = moment($scope.currentDay).subtract(1, $scope.view).toDate();
      $scope.control.getData();
    };

    $scope.control.next = function() {
      $scope.currentDay = moment($scope.currentDay).add(1, $scope.view).toDate();
      $scope.control.getData();
    };

    $scope.control.getData = function() {

        var startDate = encodeURIComponent( moment( $scope.currentDay ).startOf( $scope.view ).toISOString() );
        var endDate = encodeURIComponent( moment( $scope.currentDay ).endOf( $scope.view ).toISOString() );

        var getURL = "getschedule1.php?starts_at=" + startDate + "&ends_at=" + endDate;

        $http.get( getURL ).success(function (data) { $scope.events = data;})

    }

}

..the idea being that on first load, I would make an ajax call using the first day of the month and grab all events for that month. If the end user clicks PREV or NEXT it would make ajax calls again grabbing the corresponding events. I am still trying to figure out how to do this for the Month, Day, Week, Year .. but I'll get to that.

Lastly, is there a way to hide the Editor? I am having my end users login and depending on their access I want to allow/revoke access to the Editor portion.

Any guidance would be greatly appreciated!

Thanks again.

[mattlewis92]

You don't need to edit the source of the calendar, as a rule of thumb never edit 3rd party libraries as updating them to the latest version becomes a nightmare. Just load the events in the controller as you have done and when you update $scope.events the calendar will auto update, providing you've passed the object through to the directive.

You can hide anything in angular using the ng-hide / ng-show directives.

[infacq]

@PatrickRansom what else do I need to set because when the data loaded into events, the calendar doesn't show the events

[inventnyc]

Possible to bump? I'm in the same boat. I update my $scope.events on month change but the view only works for the current/starting month, other months being blank despite change in $scope.events. Thanks!

[carlomilanesi]

I don't understand how to load via AJAX only the events of the current period (week, month, or year). The Serhioromano/bootstrap-calendar library has an "events_source" parameter, to that purpose.