wonder95 wonder95 - 5 months ago 68
AngularJS Question

Access each individual custom cell with Angular bootstrap calendar

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.

Answer

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.