<div class="row" id="calendar_{{dataNode.id}}">
  {{#dataNode.calendar.months}}
  <!-- Calendar -->
  <div class="calendar mb-5 {{calendarClass}}">
    <div class="d-flex align-items-center">
      <i class="fa fa-calendar fa-3x mr-3"></i>
      <h2 class="month font-weight-bold mb-0 text-uppercase">{{monthLabel}}</h2>
    </div>
    <ol class="day-names list-unstyled">
      <li class="font-weight-bold text-uppercase">
        {{dataNode.calendar.days.0}}
      </li>
      <li class="font-weight-bold text-uppercase">
        {{dataNode.calendar.days.1}}
      </li>
      <li class="font-weight-bold text-uppercase">
        {{dataNode.calendar.days.2}}
      </li>
      <li class="font-weight-bold text-uppercase">
        {{dataNode.calendar.days.3}}
      </li>
      <li class="font-weight-bold text-uppercase">
        {{dataNode.calendar.days.4}}
      </li>
      <li class="font-weight-bold text-uppercase">
        {{dataNode.calendar.days.5}}
      </li>
      <li class="font-weight-bold text-uppercase">
        {{dataNode.calendar.days.6}}
      </li>
    </ol>

    <ol class="days list-unstyled">
      {{#days}}
      <li {{^date}}class="outside"{{/date}}>
        {{^date}}
        <div class="date"></div>
        {{/date}}
        {{#date}}
        <div class="date">{{date}}</div>
        {{#events}}<a href="{{href}}" data-customClass="calendar-popup"
        data-placement="top" data-html="true" data-trigger="click" data-toggle="popover"
        data-container="#calendar_{{dataNode.id}}"
        onclick="openTooltip(this,'{{event.popupHref}}');event.preventDefault();event.stopPropagation();" >
          <div
            class="event all-day {{#transparent}}transparent{{/transparent}}{{^transparent}}{{event.color}}{{/transparent}} {{#begin}}begin{{/begin}} {{#end}}end{{/end}} span-{{span}}"
          >{{#event.hasIcon}}<i class="{{event.icon}}"></i>{{/event.hasIcon}}
            {{event.eventTitle}}
          </div></a
        >
        {{/events}} {{/date}}
      </li>
      {{#lastWeekDay}}
    </ol>
    <ol class="days list-unstyled">
      {{/lastWeekDay}}
      {{/days}}

    </ol>
  </div>

  {{/dataNode.calendar.months}}
</div>

<script type="text/javascript">
  loadStyle('/popup/popup.css');
</script>
