<div
  mwl-droppable
  on-drop="vm.handleEventDrop(dropData.event, day.date, dropData.draggedFromDate)"
  mwl-drag-select="!!vm.onDateRangeSelect"
  on-drag-select-start="vm.onDragSelectStart(day)"
  on-drag-select-move="vm.onDragSelectMove(day)"
  on-drag-select-end="vm.onDragSelectEnd(day)"
  class="cal-month-day {{ day.cssClass }}"
  ng-class="{
    'cal-day-outmonth': !day.inMonth,
    'cal-day-inmonth': day.inMonth,
    'cal-day-weekend': day.isWeekend,
    'cal-day-past': day.isPast,
    'cal-day-today': day.isToday,
    'cal-day-future': day.isFuture,
    'cal-day-selected': vm.dateRangeSelect && vm.dateRangeSelect.startDate <= day.date && day.date <= vm.dateRangeSelect.endDate,
    'cal-day-open': dayIndex === vm.openDayIndex
  }">

  <small
    class="cal-events-num badge badge-important pull-left"
    ng-show="day.badgeTotal > 0 && (vm.calendarConfig.displayAllMonthEvents || day.inMonth)"
    ng-bind="day.badgeTotal">
  </small>

  <span
    class="pull-right"
    data-cal-date
    ng-click="vm.calendarCtrl.dateClicked(day.date)"
    ng-bind="day.label">
  </span>

  <div class="cal-day-tick" ng-show="dayIndex === vm.openDayIndex && (vm.cellAutoOpenDisabled || vm.view[vm.openDayIndex].events.length > 0) && !vm.slideBoxDisabled">
    <i class="glyphicon glyphicon-chevron-up"></i>
    <i class="fa fa-chevron-up"></i>
  </div>

  <ng-include src="vm.customTemplateUrls.calendarMonthCellEvents || vm.calendarConfig.templates.calendarMonthCellEvents"></ng-include>

  <div id="cal-week-box" ng-if="$first && rowHovered">
    <span ng-bind="vm.getWeekNumberLabel(day)"></span>
  </div>

</div>
