title: how to get all the events of the day in angular-bootstrap-calendar
body: <p>Is there any option in <strong>angular-bootstrap-calendar</strong> to grab the day's  with <code>on-timespan-click = "dateClicked(eventsOfTheDay)"</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('myApp', ['mwl.calendar', 'ui.bootstrap'])
    .controller('calendarCtrl', ['$scope',
      function($scope) {
        $scope.calendarView = 'month';
        $scope.calendarDate = new Date();
        $scope.bookings = [{
          title: 'Today',
          type: 'info',
          startsAt: new Date(2016, 2, 10, 1),
          endsAt: new Date(2016, 2, 10, 2),
          recursOn: 'month',
  
          editable: false,
          deletable: false,
          draggable: false,
          resizable: false,
          incrementsBadgeTotal: true,
          cssClass: 'a-css-class-name'
        }, {
          title: 'Today is saturday',
          type: 'info',
          startsAt: new Date(2016, 2, 10, 3),
          endsAt: new Date(2016, 2, 10, 4),
          editable: false,
          deletable: false,
          draggable: true,
          resizable: true,
          incrementsBadgeTotal: true,
          recursOn: 'month',
          cssClass: 'a-css-class-name'
        }, {
          title: 'Today is saturday',
          type: 'info',
          startsAt: new Date(2016, 2, 10, 3),
          endsAt: new Date(2016, 2, 10, 4),
          editable: false,
          deletable: false,
          draggable: true,
          resizable: true,
          incrementsBadgeTotal: true,
          recursOn: 'month',
          cssClass: 'a-css-class-name'
        }, {
          title: 'Today is saturday',
          type: 'info',
          startsAt: new Date(2016, 2, 11, 3),
          endsAt: new Date(2016, 2, 11, 4),
          editable: false,
          deletable: false,
          draggable: true,
          resizable: true,
          incrementsBadgeTotal: true,
          recursOn: 'month',
          cssClass: 'a-css-class-name'
        }];
  
        $scope.bookingClicked = function(theBooking) {
          console.clear();
          console.log("This is your booking you clicked");
          console.log(theBooking);
        };
  
        $scope.dateClicked = function(todaysBooking) {
          console.clear();
          console.log("hello mate");
          console.log(todaysBooking);
          alert(todaysBooking);
        };
      }
    ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.4/interact.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
  &lt;script src="//mattlewis92.github.io/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"&gt;&lt;/script&gt;
  &lt;script src="example.js"&gt;&lt;/script&gt;
  &lt;script src="helpers.js"&gt;&lt;/script&gt;
  &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="//mattlewis92.github.io/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet"&gt;
  &lt;body ng-app="myApp" ng-controller="calendarCtrl" class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
        &lt;h1 class="text-center"&gt;{{calendarTitle}}&lt;/h1&gt;
        &lt;mwl-calendar view="calendarView" view-date="calendarDate" events="bookings" on-event-click="bookingClicked(calendarEvent)" view-title="calendarTitle" on-timespan-click="dateClicked(eventsOfTheDay)" on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
        edit-event-html="'&lt;i class=\'glyphicon glyphicon-pencil\'&gt;&lt;/i&gt;'" delete-event-html="'&lt;i class=\'glyphicon glyphicon-remove\'&gt;&lt;/i&gt;'" on-edit-event-click="eventEdited(calendarEvent)" on-delete-event-click="eventDeleted(calendarEvent)" cell-is-open="true"&gt;
        &lt;/mwl-calendar&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>