Access each individual custom cell with Angular bootstrap calendar
<p>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 <a href="https://github.com/mattlewis92/angular-bootstrap-calendar" rel="nofollow">Angular Bootstrap Calendar</a> with <a href="https://mattlewis92.github.io/angular-bootstrap-calendar/#?example=custom-templates" rel="nofollow">custom cell templates</a>. 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. </p>

<p>Here's my controller:</p>

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

<p>and the corresponding dayTemplate.html:</p>

<pre><code>&lt;div class="cal-month-day"&gt;

    &lt;span
      class="pull-right"
      data-cal-date
      ng-click="calendarCtrl.dateClicked(day.date)"
      ng-bind="day.label"&gt;
    &lt;/span&gt;
&lt;!--
  &lt;small style="position: absolute; bottom: 10px; left: 5px"&gt;
    There are {{ day.events.length }} events on this day
  &lt;/small&gt; --&gt;

  &lt;!-- &lt;table class="table table-bordered table-condensed"&gt; --&gt;
  &lt;table class="table table-bordered table-condensed"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;td&gt;Station&lt;/td&gt;
        &lt;td&gt;Position&lt;/td&gt;
        &lt;td&gt;Name&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td rowspan="3" align="top"&gt;1&lt;/td&gt;
        &lt;td&gt;Position&lt;/td&gt;
        &lt;td&gt;Name&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Position&lt;/td&gt;
        &lt;td&gt;Name&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Position&lt;/td&gt;
        &lt;td&gt;Name&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;

  &lt;table class="table table-bordered table-condensed"&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td rowspan="3" align="top"&gt;2&lt;/td&gt;
      &lt;td&gt;Position&lt;/td&gt;
      &lt;td&gt;Name&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Position&lt;/td&gt;
      &lt;td&gt;Name&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Position&lt;/td&gt;
      &lt;td&gt;Name&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;

  &lt;table class="table table-bordered table-condensed"&gt;
    &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td rowspan="3" align="top"&gt;3&lt;/td&gt;
      &lt;td&gt;Position&lt;/td&gt;
      &lt;td&gt;Name&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Position&lt;/td&gt;
      &lt;td&gt;Name&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Position&lt;/td&gt;
      &lt;td&gt;Name&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;

&lt;/div&gt;
</code></pre>

<p>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?</p>

<p>Thanks.</p>

<p><strong>UPDATE</strong>: I just went back and read the <a href="https://github.com/mattlewis92/angular-bootstrap-calendar/blob/master/src/services/calendarHelper.js#L123" rel="nofollow">docs</a> and noticed this </p>

<blockquote>
  <p>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 <a href="https://github.com/mattlewis92/angular-bootstrap-calendar/blob/master/src/services/calendarHelper.js#L123" rel="nofollow">source code</a> or just console.log it to
  see what data is available). If you add the cssClass property it will
  be applied to the cell.</p>
</blockquote>

<p>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.</p>