calendarDayView.html

<div class="cal-week-box cal-all-day-events-box" ng-if="vm.allDayEvents.length > 0">
  <div class="cal-day-panel clearfix">
    <div class="row">
      <div class="col-xs-12">
        <div class="cal-row-fluid">
          <div
            class="cal-cell-6 day-highlight"
            ng-style="{backgroundColor: event.color.secondary}"
            data-event-class
            ng-repeat="event in vm.allDayEvents track by event.calendarEventId">
            <strong>
              <span ng-bind="event.startsAt | calendarDate:'datetime':true"></span>
              <span ng-if="event.endsAt">
                - <span ng-bind="event.endsAt | calendarDate:'datetime':true"></span>
              </span>
            </strong>
            <a
              href="javascript:;"
              class="event-item"
              ng-click="vm.onEventClick({calendarEvent: event})"
              ng-bind-html="vm.calendarEventTitle.dayView(event) | calendarTrustAsHtml">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="cal-day-box">
  <div class="cal-day-panel clearfix" ng-style="{height: vm.dayViewHeight + 'px', minWidth: vm.viewWidth + 'px'}">

    <mwl-calendar-hour-list
      day-view-start="vm.dayViewStart"
      day-view-end="vm.dayViewEnd"
      day-view-split="vm.dayViewSplit"
      on-timespan-click="vm.onTimespanClick"
      on-date-range-select="vm.onDateRangeSelect"
      on-event-times-changed="vm.onEventTimesChanged"
      view-date="vm.viewDate"
      custom-template-urls="vm.customTemplateUrls"
      template-scope="vm.templateScope"
      cell-modifier="vm.cellModifier"
      view="day">
    </mwl-calendar-hour-list>

    <div
      class="pull-left day-event day-highlight"
      ng-repeat="dayEvent in vm.nonAllDayEvents track by dayEvent.event.calendarEventId"
      ng-class="dayEvent.event.cssClass"
      ng-style="{
        top: dayEvent.top - 1 + 'px',
        left: dayEvent.left +  vm.dayViewTimePositionOffset + 'px',
        height: dayEvent.height + 'px',
        width: dayEvent.width + 'px',
        backgroundColor: dayEvent.event.color.secondary,
        borderColor: dayEvent.event.color.primary
      }"
      mwl-draggable="dayEvent.event.draggable === true"
      axis="'xy'"
      snap-grid="{y: vm.dayViewEventChunkSize || 30, x: 50}"
      on-drag="vm.eventDragged(dayEvent.event, y / (vm.dayViewSegmentSize || 30))"
      on-drag-end="vm.eventDragComplete(dayEvent.event, y / (vm.dayViewSegmentSize ||  30))"
      auto-scroll="vm.draggableAutoScroll"
      mwl-resizable="dayEvent.event.resizable === true && dayEvent.event.endsAt"
      resize-edges="{top: true, bottom: true}"
      on-resize="vm.eventResized(dayEvent.event, edge, y / (vm.dayViewSegmentSize || 30))"
      on-resize-end="vm.eventResizeComplete(dayEvent.event, edge, y / (vm.dayViewSegmentSize || 30))"
      uib-tooltip-html="vm.calendarEventTitle.dayViewTooltip(dayEvent.event) | calendarTrustAsHtml"
      tooltip-append-to-body="true">

      <span class="cal-hours">
        <span ng-show="dayEvent.top == 0"><span ng-bind="(dayEvent.event.tempStartsAt || dayEvent.event.startsAt) | calendarDate:'day':true"></span>, </span>
        <span ng-bind="(dayEvent.event.tempStartsAt || dayEvent.event.startsAt) | calendarDate:'time':true"></span>
      </span>
      <a
        href="javascript:;"
        class="event-item"
        ng-click="vm.onEventClick({calendarEvent: dayEvent.event})">
        <span ng-bind-html="vm.calendarEventTitle.dayView(dayEvent.event) | calendarTrustAsHtml"></span>
      </a>

      <a
        href="javascript:;"
        class="event-item-action"
        ng-repeat="action in dayEvent.event.actions track by $index"
        ng-class="action.cssClass"
        ng-bind-html="action.label | calendarTrustAsHtml"
        ng-click="action.onClick({calendarEvent: dayEvent.event})">
      </a>

    </div>

  </div>

</div>