Implementation of a calendar component using Angular 2+ and two ionic components (ion-slides/ion-slide and ion-spinner).

calendar-component.html

<!--**********
calendar-component.html

Angular 2 UI Integration of a calendar component.
Displays monthly and weekly calendar, shows current day and outputs a selected day.

Refresh data on each month. Previous, current and next years should be calculated on app init for best performances.
Month to Month data calculation should be done in webworker thread for best performances.

Requires Angular 2+ and Ionic 2+ Slides/Slide and Spinner component:
https://angular.io/
https://ionicframework.com/docs/api/components/slides/Slides/
https://ionicframework.com/docs/api/components/spinner/Spinner/
**********-->

<!-- User can chose between weekly or monthly calendar -->
<div class="calendar">
  <div class="subheader segment">
    <ion-row>
      <button (tap)="setCalendarType('week')" [ngClass]="{active: calendarType == 'week'}" ion-col>
       week
      </button>
      <button (tap)="setCalendarType('month')" [ngClass]="{active: calendarType == 'month'}" ion-col>
        Month
      </button>
    </ion-row>
  </div>

  <!-- User can navigate between months -->
  <ion-row class="calendar-control">
    <ion-col (tap)="goPreviousMonth()" col-3>&lt;</ion-col>
    <ion-col *ngIf="months[calendar.currentMonth - 1]" col-6>{{months[calendar.currentMonth - 1].fr}} {{calendar.currentYear}}</ion-col>
    <ion-col (tap)="goNextMonth()" col-3>&gt;</ion-col>
  </ion-row>

  <!-- Shows days of the week (in French : L M M J V S D) -->
  <table>
    <tr>
      <th *ngFor="let day of week">{{day.fr}}</th>
    </tr>
  </table>

  <!-- Each month or week is a draggable by being built in a slider -->
  <div class="calendar-slider" [ngClass]="{blurred: blurred}">
    <ion-slides #calendar loop [initialSlide]="calendar.initSlide" (ionSlideWillChange)="onChangeMonth()">
      <ion-slide *ngFor="let month of months; let i = index">
        <!-- Optional spinner to shows data loading on month change/year -->
        <ion-spinner *ngIf="!loaded"></ion-spinner>
        
        <!-- Monthly calendar -->
        <table *ngIf="loaded" [hidden]="calendarType != 'month'">
          <tr *ngFor="let day of calendar.days; let i = index">
            <ng-template [ngIf]="i % 7 == 0">
              <!-- Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday -->
              <td *ngFor="let day of week; let j = index"
                  [ngClass] = "{
                    hasEvent: calendar.days[i + j].hasEvent,
                    active: selectedDay == calendar.days[i + j].number,
                    today: currentTime.getFullYear() == calendar.currentYear && currentTime.getMonth() == calendar.currentMonth - 1 && currentTime.getDate() == calendar.days[i + j].number
                  }"
                  (tap)="selectDay(calendar.days[i + j].number, i + j)"
                  *ngIf="calendar.days[i + j]">
                    <!-- Displays day number -->
                    <div class="day-number">{{calendar.days[i + j].number}}</div>
                    <!-- Displays dot if there is an event this day -->
                    <div class="event-dot"></div>
              </td>
            </ng-template>
          </tr>
        </table>

        <!-- Weekly calendar -->
        <!-- Weekly Slider inside Monthly Slider, so sliding the last week of the month slides the month as well. -->
        <ion-slides class="weekly" #weekCalendar [initialSlide]="calendar.initWeekSlide" [hidden]="calendarType != 'week'" (ionSlideWillChange)="onChangeWeek()">
          <ion-slide *ngFor="let weekdays of calendar.weeks; let i = index">
            <table *ngIf="loaded">
              <tr>
                <!-- Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday -->
                <td *ngFor="let day of week; let j = index"
                    [ngClass] = "{
                      hasEvent: weekdays[j].hasEvent,
                      active: selectedDay == weekdays[j].number,
                      today: currentTime.getFullYear() == calendar.currentYear && currentTime.getMonth() == calendar.currentMonth - 1 && currentTime.getDate() == weekdays[j].number
                    }"
                    (tap)="selectDay(weekdays[j].number, j)"
                    *ngIf="weekdays[j]">
                      <!-- Displays day number -->
                      <div class="day-number">{{calendar.days[j].number}}</div>
                      <!-- Displays dot if there is an event this day -->
                      <div class="event-dot"></div>
                </td>
              </tr>
            </table>
          </ion-slide>
        </ion-slides>
        <!-- Weekly calendar - End -->
      </ion-slide>
    </ion-slides>
    <!-- Monthly calendar - End -->
  </div>
</div>