<ng-container *ngIf="day.active">
  <div class="bg-white border h-100 p-2 ">

    <div class="row mb-3">
      <div class="col-12 d-block d-md-none d-lg-block app-font-size-md app-font-weight-normal ">{{getMonthOfDay()}}.{{getDateOfDay()}}</div>
      <div class="col-12 d-none d-md-block d-lg-none  app-font-size-md app-font-weight-normal">{{getMonthOfDay()}}.</div>
      <div class="col-12 d-none d-md-block d-lg-none ">{{getDateOfDay()}}</div>
      <div class="col-12 ">
        <span class=" d-md-none text-center text-muted">{{getDayOfWeekName()}}</span>
      </div>
      <div *ngIf="!hasEvents()" class="col-12  text-wrap">-</div>
    </div>
    <ng-container *ngIf="hasEvents()">
      <app-month-calendar-event
        *ngFor="let event of day.events"
        [event]="event"
        (onEvent)="handleEvent($event)"
      ></app-month-calendar-event>
    </ng-container>
  </div>
</ng-container>
