angular-bootstrap calendar is not displaying calendar

Question

I have installed all the component but also calendar is not displyaing. I have downloaded moment manually and injected in app.js

module is:

angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives','ngCordova','angularMoment','mwl.calendar', 'ui.bootstrap'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

controller:

  .controller('timesheetCtrl', function($scope,$cordovaCalendar) {

  $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
   }
];

})

View (index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>


    <script src="cordova.js"></script>

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js"></script>
     <script src="lib/angular-moment/angular-moment.js"></script>
    <link href="lib/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">

    <script src="lib/ui-bootstrap-tpls-1.2.2.min.js"></script>
        <script src="lib/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>

    <!-- Only required for Tab projects w/ pages in multiple tabs 
    <script src="lib/ionicuirouter/ionicUIRouter.js"></script>
    -->

  </head>
  <body ng-app="app" animation="slide-left-right-ios7">
  <div>
    <div>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view></ion-nav-view>
    </div>
</div>
  </body>
</html>

Timesheet.html:

<ion-view title="Timesheet">
    <ion-content overflow-scroll="true" padding="true" class="has-header">
    {{tester}}
        <mwl-calendar
    view="calendarView"
    view-date="calendarDate"
    events="events"
    view-title="calendarTitle"
    on-event-click="eventClicked(calendarEvent)"
    on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
    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)"
    cell-is-open="true">
</mwl-calendar>
    </ion-content>
</ion-view>

anybody know the solution of this problem?

Answer 1

I can tell you what I see at first sight. If your are using angular moment, which is build on top of moment.js you need to include that file as well.

<script src="lib/moment/moment.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>

Check the official doc for angular moment, everything is explain there. Good luck !

angular-bootstrap calendar is not displaying calendar

Question

1 answers

solution1
1 2016-05-09 18:06:22

angular-bootstrap calendar is not displaying calendar

Question

1 answers

solution1 1 2016-05-09 18:06:22

solution1
1 2016-05-09 18:06:22