使用 Angular 引导日历访问每个单独的自定义单元格

Question

我正在开发一个需要日历框架（没有标准事件）的应用程序，这样我就可以在每个单元格内放置表格，所以我使用Angular Bootstrap Calendar 和custom cell templates。在每个单元格中显示自定义模板并能够在几个月之间导航方面，我的一切工作正常，但我需要能够访问每一天并在每一天提供数据。

这是我的控制器：

(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 服务 source code 或只是 console.log 到 看看有什么数据可用）。如果添加 cssClass 属性，它将 应用于单元格。

由于我缺乏知识，我不明白如何使用它来覆盖。如果我 console.log calendarCell 在我的 calendarController 中，它会因为该对象不存在而窒息。如果我没看错的话，我可以截取单元格数据并进行修改，但我不明白如何。

Answer 1

在这种情况下，RTFM 被证明是正确的答案。根据docs：

<div ng-controller="CellModifierCtrl as vm">
  <ng-include src="'calendarControls.html'"></ng-include>
  <mwl-calendar
    events="vm.events"
    view="vm.calendarView"
    view-date="vm.viewDate"
    cell-modifier="vm.cellModifier(calendarCell)">
  </mwl-calendar>
</div>

在控制器中使用这个：

vm.cellModifier = function(cell) {
  console.log(cell);
  if (cell.label % 2 === 1 && cell.inMonth) {
    cell.cssClass = 'odd-cell';
  }
  cell.label = '-' + cell.label + '-';
};

瞧！，您可以访问数据。我仍在尝试弄清楚如何将其他数据传递到函数中，但我会为此打开一个单独的问题。