Question

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

这是我的控制人员：

(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对象有数据，但我需要访问该对象，或者创建我自己的对象，以便填写表格。是否有一种简单（甚至不那么简单）的方法呢？

感谢。

更新：我刚回去阅读custom cell templates并注意到了这一点

在为其生成的每个单元格上计算的可选表达式年和月的观点。 calendarCell可以在表达式中使用并且是包含您可以修改的当前单元格数据的对象（请参阅calendarHelper服务docs或仅将console.log更改为看看有哪些数据可用）。如果你添加cssClass属性，它将适用于细胞。

由于我缺乏知识，我不理解如何使用它来覆盖。如果我在我的calendarController中使用console.log calendarCell它会因为该对象不存在而窒息。如果我正确读取此内容，我可以拦截单元格数据并进行修改，但我不了解如何。

Answer 1

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

<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 + '-';
};

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

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

1 个答案: