doneit-web/src/app/pages/agenda/agenda.page.html

<ion-header>
  <app-header></app-header>
</ion-header>
<ion-header>
  <ion-toolbar class="bg-blue">
  <div class="main-header">
  <ion-toolbar>
    <ion-buttons slot="end">
      <!-- customized TOGGLE button -->
      <div class="toggleBox">
        <div (click)="changeProfile()" class="toggle">
          <input type="checkbox">
          <label for="" class="onbtn">PR</label>
          <label for="" class="ofbtn">MDGPR</label>
        </div> 
      </div>
    </ion-buttons>
    <ion-label class="header-title">Agenda</ion-label>
  </ion-toolbar>
  <ion-toolbar>
    <ion-segment [(ngModel)]="segment">
      <ion-segment-button value="Combinada">
        Combinada
      </ion-segment-button>
      <ion-segment-button value="Oficial">
        Oficial
      </ion-segment-button>
      <ion-segment-button value="Pessoal">
        Pessoal
      </ion-segment-button>
    </ion-segment>
  
  </ion-toolbar>
  </div>
  </ion-toolbar>
</ion-header>
  <ion-content>

   <!--  Calendar is here -->

    <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
      <ion-refresher-content>
      </ion-refresher-content>
    </ion-refresher>
    <div [ngSwitch]="segment">
      <div *ngSwitchCase="'Combinada'">
        <ion-row>
          <!-- Move back one screen of the slides -->
          <ion-col size="2">
            <ion-button fill="clear" (click)="back()">
              <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-col>
          <!-- The title of the calendar in the middle -->
          <ion-col size="8" class="ion-text-center">
            <h2 class="capitaliseText">{{ viewTitle }}</h2>
          </ion-col>
      
          <!-- Move forward one screen of the slides -->
          <ion-col size="2">
            <ion-button fill="clear" (click)="next()">
              <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-col>
        </ion-row>
      
        <calendar
          [eventSource]="eventSource"
          [calendarMode]="calendar.mode"
          [currentDate]="calendar.currentDate"
          (onEventSelected)="onEventSelected($event)"
          (onTitleChanged)="onViewTitleChanged($event)"
          (onRangeChanged)="onRangeChanged($event)"
          (onCurrentDateChanged)="onCurrentChanged($event)"
          queryMode="remote"
          startHour="6"
          endHour="20"
          step="30"
          startingDayMonth="1"
          noEventsLabel="Sem Eventos"
          allDayLabel="Todo o dia"
          [monthviewDisplayEventTemplate]="template"
        >
        </calendar>

        <!-- Adding a customized ng-template -->
        <ng-template #template let-view="view" let-row="row" let-col="col">
          <div [class.with-event]="view.dates[row*7+col].events.length">
            {{view.dates[row*7+col].label}}
            <div class="indicator-container">
              <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
            </div>
          </div>
        </ng-template>
      </div>
      <div *ngSwitchCase="'Pessoal'">
        <ion-row>
          <!-- Move back one screen of the slides -->
          <ion-col size="2">
            <ion-button fill="clear" (click)="back()">
              <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-col>
          <!-- The title of the calendar in the middle -->
          <ion-col size="8" class="ion-text-center">
            <h2 class="capitaliseText">{{ viewTitle }}</h2>
          </ion-col>
      
          <!-- Move forward one screen of the slides -->
          <ion-col size="2">
            <ion-button fill="clear" (click)="next()">
              <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-col>
        </ion-row>
      
        <calendar
          [eventSource]="eventSource"
          [calendarMode]="calendar.mode"
          [currentDate]="calendar.currentDate"
          (onEventSelected)="onEventSelected($event)"
          (onTitleChanged)="onViewTitleChanged($event)"
          (onRangeChanged)="onRangeChanged($event)"
          (onCurrentDateChanged)="onCurrentChanged($event)"
          queryMode="remote"
          startHour="6"
          endHour="20"
          step="30"
          startingDayMonth="1"
          noEventsLabel="Sem Eventos"
          allDayLabel="Todo o dia"
          [monthviewDisplayEventTemplate]="template"
        >
        </calendar>
        <!-- (onTimeSelected)="onTimeSelected($event)" -->

        <!-- Adding a customized ng-template -->
        <ng-template #template let-view="view" let-row="row" let-col="col">
          <div [class.with-event]="view.dates[row*7+col].events.length">
            {{view.dates[row*7+col].label}}
            <div class="indicator-container">
              <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
            </div>
          </div>
        </ng-template> 

      </div>
      <div *ngSwitchCase="'Oficial'">
        <ion-row>
          <!-- Move back one screen of the slides -->
          <ion-col size="2">
            <ion-button fill="clear" (click)="back()">
              <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-col>
          <!-- The title of the calendar in the middle -->
          <ion-col size="8" class="ion-text-center">
            <h2 class="capitaliseText">{{ viewTitle }}</h2>
          </ion-col>
      
          <!-- Move forward one screen of the slides -->
          <ion-col size="2">
            <ion-button fill="clear" (click)="next()">
              <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-col>
        </ion-row>
      
        <calendar
          [eventSource]="eventSource"
          [calendarMode]="calendar.mode"
          [currentDate]="calendar.currentDate"
          (onEventSelected)="onEventSelected($event)"
          (onTitleChanged)="onViewTitleChanged($event)"
          (onRangeChanged)="onRangeChanged($event)"
          (onCurrentDateChanged)="onCurrentChanged($event)"
          queryMode="remote"
          startHour="6"
          endHour="20"
          step="30"
          startingDayMonth="1"
          noEventsLabel="Sem Eventos"
          allDayLabel="Todo o dia"
          [monthviewDisplayEventTemplate]="template"
        >
        </calendar>

        <!-- Adding a customized ng-template -->
        <ng-template #template let-view="view" let-row="row" let-col="col">
          <div [class.with-event]="view.dates[row*7+col].events.length">
            {{view.dates[row*7+col].label}}
            <div class="indicator-container">
              <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
            </div>
          </div>
        </ng-template> 

      </div>
      <ion-fab (click)="openAddEvent()" vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button>
          <ion-icon name="add" ></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </div>
  </ion-content>