CODEWITHSUNDEEP
angularjsionic-framework
Lorna Kelly
Lorna Kelly

Reputation: 99

Integrating angular calendar into ionic infinite scroll

I am new enough to Angular. I am trying to integrate the angular-bootstrap-calendar into an ionic app.

https://github.com/mattlewis92/angular-bootstrap-calendar

I am using the ‘week’ view but instead of incrementing to the next week using a button:

<button class="button ng-model="next" ion-chevron-right btn btn-primary"
    mwl-date-modifier
   date="calendarDay"
   increment="calendarView">
 </button>

I am trying to put it into a horizontal scroll bar using ion-infinite-scroll. So if someone scrolls horizontally, when it hits the 7th day it increments to the next week just like the above next button does. i have been struggling with it for a while and wondering if it actually possible to do without a huge amount of work. The following is my markup:

<ion-infinite-scroll direction="y" locking="false" class="calendarContainer" on-infinite="loadMoreDates()">

<mwl-calendar view="calendarView"
    current-day="calendarDay"
    events="events"
    view-title="calendarTitle">
</mwl-calendar>

  </ion-infinite-scroll>

And my controller, which is obviously wrong - i have just tried so many things already:

myApp.controller('calendarController', function($scope, $rootScope){
  $scope.calendarView = 'week';
  $scope.calendarDay =  new Date();
  $scope.calendarTitle = 'Hello';

$scope.loadMoreDates = function(){
   $scope.next = moment($scope.date).add(1, $scope.increment).toDate();
  $scope.$broadcast('scroll.infiniteScrollComplete');
}

I can see the following directive that is used for incrementing the days. Wondering if it is possible to call the increment part of this directive from my controller?

 .directive('mwlDateModifier', function() {

return {
  restrict: 'A',
  controller: function($element, $attrs, $scope, moment) {

    function onClick() {
      if (angular.isDefined($attrs.setToToday)) {
        $scope.date = new Date();
      } else if (angular.isDefined($attrs.increment)) {
        $scope.date = moment($scope.date).add(1, $scope.increment).toDate();
      } else if (angular.isDefined($attrs.decrement)) {
        $scope.date = moment($scope.date).subtract(1, $scope.decrement).toDate();
      }
      $scope.$apply();
    }

    $element.bind('click', onClick);

    $scope.$on('$destroy', function() {
      $element.unbind('click', onClick);
    });

  },
  scope: {
    date: '=',
    increment: '=',
    decrement: '='
  }
};

 });

I have been battling with this for a while and I am not expecting someone to do this for me, if someone could just let me know if I am doing it completely wrong or if it would require a lot of work? Or if someone could just point me in the right direction that would be great?

Upvotes: 1

Views: 1787

Answers (1)

Travis
Travis

Reputation: 5061

This block of code should never work b/c you don't have a $scope.date and $scope.increment declared anywhere and connected to the calendar view, right? It looks like variables that were connected to the directive and scoped inside the directive, so they won't work without implementing them in your controller.

    $scope.loadMoreDates = function(){
       $scope.next = moment($scope.date).add(1, $scope.increment).toDate();
       $scope.$broadcast('scroll.infiniteScrollComplete');
    }

I think it should be something like 

    $scope.loadMoreDates = function(){
       //increment calendarDay by 1 week
       $scope.calendarDay = moment($scope.calendarDay).add(7, 'days').toDate();
       $scope.$broadcast('scroll.infiniteScrollComplete');
    }

Upvotes: 1

Related Questions