Я работаю над приложением, в котором мне нужен скелет календаря (без стандартных событий), чтобы я мог помещать таблицы в каждую ячейку, поэтому я использую Календарь Angular Bootstrap с пользовательские шаблоны ячеек. У меня все работает нормально с точки зрения отображения пользовательского шаблона в каждой ячейке и возможности перемещаться между месяцами, но мне нужно иметь доступ к каждому отдельному дню и делать данные доступными в каждом из них.
Вот мой контроллер:
(function() {
angular.module('myApp')
.controller('calendarController', function($scope, $state, moment, calendarConfig) {
var vm = this;
calendarConfig.templates.calendarMonthCell = 'views/calendar/dayTemplate.html';
calendarConfig.dateFormatter = 'moment';
vm.events = [];
vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
$scope.$on('$destroy', function() {
calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
});
});
})();
и соответствующий файл dayTemplate.html:
<div class="cal-month-day">
<span
class="pull-right"
data-cal-date
ng-click="calendarCtrl.dateClicked(day.date)"
ng-bind="day.label">
</span>
<!--
<small style="position: absolute; bottom: 10px; left: 5px">
There are {{ day.events.length }} events on this day
</small> -->
<!-- <table class="table table-bordered table-condensed"> -->
<table class="table table-bordered table-condensed">
<thead>
<tr>
<td>Station</td>
<td>Position</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3" align="top">1</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td rowspan="3" align="top">2</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td rowspan="3" align="top">3</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
</div>
При обычном использовании календаря вы можете видеть, что объект days.events имеет данные, но мне нужно получить доступ к этому объекту или создать свой собственный, чтобы я мог заполнять свои таблицы. Есть ли простой (или даже не очень простой) способ сделать это?
Спасибо.
ОБНОВЛЕНИЕ: я только что вернулся и прочитал docs и заметил это
Необязательное выражение, которое оценивается для каждой ячейки, созданной для представлений года и месяца. calendarCell может использоваться в выражении и представляет собой объект, содержащий текущие данные ячейки, которые вы можете изменить (см. службу calendarHelper исходный код или просто console.log, чтобы узнать, какие данные доступны). Если вы добавите свойство cssClass, оно будет применено к ячейке.
Из-за недостатка знаний я не понимаю, как использовать это для переопределения. Если я console.log calendarCell в моем calendarController, он задыхается, потому что этот объект не существует. Если я правильно понимаю, я могу перехватить данные ячейки и изменить их, но я не понимаю, как это сделать.