[英]how to get all the events of the day in angular-bootstrap-calendar
angular-bootstrap-calendar中是否有任何选项可以通过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>
使用on-timespan-click="dateClicked(calendarCell.events)" 参考完全可能
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.length); }; } ]);
<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(calendarCell.events)" 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>
angular-bootstrap-calendar：如何覆盖减量/增量
[英]angular-bootstrap-calendar: how to overwrite decrement / increment
使用angular-bootstrap-calendar将Json的日期参数作为事件传递
[英]Passing date parameters from Json as event with angular-bootstrap-calendar
在Ionic App中安装angular-bootstrap-calendar的问题
[英]Troubles with installing angular-bootstrap-calendar into Ionic App
Google Apps Script Calendar Service：仅获取所有重复（全天）事件中的第一个事件
[英]Google Apps Script Calendar Service: Get only the first events of all recurring (all day) events
如何绑定在有角引导日历（mwl.calendar）中单击年/月/周/日
[英]how to bind click on year/Month/Week/Day in angular bootstrap calendar (mwl.calendar)
在Angular UI日历上获取所有事件（Arshaw完整日历的指令）
[英]Get all events on Angular UI-Calendar (directive for Arshaw full calendar)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.