使用Angular自举日历访问每个单独的自定义单元格 [英] Access each individual custom cell with Angular bootstrap calendar

问题描述

我正在一个应用程序，我需要一个日历骨架（没有标准事件），所以我可以把表放在每个单元格，所以我使用 Angular Bootstrap Calendar 与自定义单元格模板。我有一切工作正常在每个单元格中显示自定义模板，并能够在几个月之间导航，但我需要能够访问每个单独的日子，使数据在每个。

这是我的控制器：

  $ b 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。 '，function（）{
 calendarConfig.templates.calendarMonthCell ='mwl / calendarMonthCell.html'; 
}）; 
}）; 
}）（）; 
  

和相应的dayTemplate.html：

<$ $ p> < 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>
这一天有{{day.events.length}}个事件
< / small> - >

<！ - < table class =table table-bordered table-condensed> - >
< table class =table table-bordered table-condensed>
< thead>
< tr>
< td> Station< / td>
< td>位置< / td>
< td>名称< / td>
< / tr>
< / thead>
< tbody>
< tr>
< td rowspan =3align =top> 1< / td>
< td>位置< / td>
< td>名称< / td>
< / tr>
< tr>
< td>位置< / td>
< td>名称< / td>
< / tr>
< tr>
< td>位置< / td>
< td>名称< / td>
< / tr>
< / tbody>
< / table>

< table class =table table-bordered table-condensed>
< tbody>
< tr>
< td rowspan =3align =top> 2< / td>
< td>位置< / td>
< td>名称< / td>
< / tr>
< tr>
< td>位置< / td>
< td>名称< / td>
< / tr>
< tr>
< td>位置< / td>
< td>名称< / td>
< / tr>
< / tbody>
< / table>

< table class =table table-bordered table-condensed>
< tbody>
< tr>
< td rowspan =3align =top> 3< / td>
< td>位置< / td>
< td>名称< / td>
< / tr>
< tr>
< td>位置< / td>
< td>名称< / td>
< / tr>
< tr>
< td>位置< / td>
< td>名称< / td>
< / tr>
< / tbody>
< / table>

< / div>


当使用通常使用的日历时，您可以看到days.events对象具有数据，但我需要访问该对象，或创建我自己的所以我可以填补我的表。有一个简单的（甚至不是那么简单）的方法来做？

谢谢。

UPDATE ：我刚回去阅读了 docs 并注意到此

在为
生成的每个单元格上评估的可选表达式年和月视图。 calendarCell可以在表达式
中使用，并且是包含当前单元格数据的对象，您可以修改
（请参阅calendarHelper服务源代码或只是console.log它到
看看有什么数据可用）。如果添加cssClass属性，它将
应用于单元格。

由于我缺乏知识， m不理解如何使用这个来覆盖。如果我在我的calendarController中的console.log calendarCell它窒息，因为该对象不存在。

解决方案

如果我正确读取这个数据，我可以拦截单元格数据并修改，在这种情况下，RTFM证明是正确的答案。根据文档：

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

并且您可以存取资料。我仍然试图找出如何传递额外的数据到函数，但我会为此打开一个单独的问题。

I'm working on an app where I need a calendar skeleton (without the standard events) so I can put tables inside each cell, so I'm using the Angular Bootstrap Calendar with custom cell templates. I have everything working fine in terms of displaying the custom template in each cell and being able to navigate between months, but I need to be able to access each individual day and make data available in each one.

Here's my controller:

(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';
    });
  });
})();

and the corresponding 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>

When using the calendar as it normally is used, you can see that the days.events object has the data, but I need to access that object, or create my own so I can fill my tables. Is there a simple (or even not so simple) way to do that?

Thanks.

UPDATE: I just went back and read the docs and noticed this

An optional expression that is evaluated on each cell generated for the year and month views. calendarCell can be used in the expression and is an object containing the current cell data which you can modify (see the calendarHelper service source code or just console.log it to see what data is available). If you add the cssClass property it will be applied to the cell.

Due to my lack of knowledge, I'm not understanding how to use this to override. If I console.log calendarCell in my calendarController it chokes because that object doesn't exist. If I'm reading this correctly, I can intercept the cell data and modify, but I'm not understanding how.

解决方案

In this case, RTFM turned out to be the correct answer. Per the 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>

goes with this in the controller:

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

and voila!, you have access to the data. I'm still trying to figure out how to pass additional data into the function, but I'll open a separate question for that.

这篇关于使用Angular自举日历访问每个单独的自定义单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！