Lorna Kelly
Lorna Kelly

Reputation: 99

Integrating angular calendar into an ionic app not working

Hi I am trying to use the below calendar in an ionic app

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

my html

 <ion-view>
   <ion-content data-ng-controller="calenderController">
    {{tester}}
    <mwl-calendar view="calendarView"
        current-day="calendarDay"
        events="events"
        view-title="calendarTitle"
        on-event-click="eventClicked(calendarEvent)"
        edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
        delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
        on-edit-event-click="eventEdited(calendarEvent)"
        on-delete-event-click="eventDeleted(calendarEvent)"
        auto-open="true">
    </mwl-calendar>
  </ion-content> 
</ion-view>

my controller

angular.module('myApp.datescreen', ['mwl.calendar'])
  myApp.controller('calenderController', function($scope, $rootScope){
  $scope.calendarView = 'week';
  $scope.calendarDay =  new Date();
  $scope.tester = 'Is the Controller connecting';
  $scope.events = [
   {
    title: 'My event title', // The title of the event
    type: 'info', 
    startsAt: new Date(2013,5,1,1),
    endsAt: new Date(2014,8,26,15), 
    editable: false,
    deletable: false,
    incrementsBadgeTotal: true
   }
];

});

I can see the controller getting hit on the page as I created 'tester' and it renders fine but for the calendar this is what appears on the page: 'The value passed to current-day attribute of the calendar is not set'

I can see that $scope.calendarDay has been set so don't know whats wrong

Can anyone help ?

Upvotes: 2

Views: 3482

Answers (1)

kachhalimbu
kachhalimbu

Reputation: 2200

You need to include moment.js for this to work. Installing through bower is not enough. Please link it via script tag on the html page.

Note: script tag for moment.js should come before script tag for calendar js file

Upvotes: 4

Related Questions