Can the angular-bootstrap-calendar provide an option to access the day's information using
on-timespan-click = "dateClicked(eventsOfTheDay)"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);
};
}
]);<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.4/interact.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="//mattlewis92.github.io/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
<script src="example.js"></script>
<script src="helpers.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//mattlewis92.github.io/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<body ng-app="myApp" ng-controller="calendarCtrl" class="container">
<div class="row">
<div class="col-sm-12">
<h1 class="text-center"><{{calendarTitle}}</h1>
<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="'<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>
</div>
</div>