ionic-conference-calendar-header/src/ionicConferenceCalendarHeader.component.html

A simple conference calendar header component for ionic

<div class="header-calendar-wrapper">

  <div (click)="openDatePicker()">
    <div class="month">{{getMonthName()}}</div>
    <div class="year">{{activeYear}}</div>
  </div>

  <div #selectionWrapper class="day-wrapper">

    <div #daySlider
         *ngIf="years.length"
         [style.width]="getSliderWidth() + 'px'"
         class="selection-slider">

      <div class="selection-slider-padding"></div>

      <div #selection 
           *ngFor="let d of getDaysInMonth()"
           [ngClass]="{active: d == activeDay}"
           (click)="setActiveDay(d)"
           class="selection">
           {{d}}
      </div>

      <div class="selection-slider-padding"></div>
            
    </div>

  </div>

</div>