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

<ion-header>
  <app-header></app-header>
</ion-header>
<ion-header>
  <div class="bg-blue">
  <div class="main-content">
  <!-- Toolbar -->
    <div>
      <!--  Calendar is here -->
      <div [ngSwitch]="segment">
        <div *ngSwitchCase="'Combinada'">

          <ion-row class="ion-justify-content-between calendar-tool-tip">
            <ion-row class="ion-align-items-center">
              <!-- Move back one screen of the slides -->
              
              <div (click)="back()" class="arrow">
                <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
              </div>

              <!-- Move forward one screen of the slides -->
              <h2 class="capitaliseText">{{ viewTitle }}</h2>
<!--               <div class="drop-down">
                <ion-icon  slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
                <div class="drop-down-container">
                  <ul>
                    <li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
                  </ul>
                </div>
              </div> -->
              <!-- Move forward one screen of the slides -->
              <div (click)="next()" class="arrow">
                <ion-icon  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
              </div>

            </ion-row>
            <ion-row class="ion-align-items-center">
              <ion-icon class="right-icons" (click)="changeProfile()" name="add-circle-outline"></ion-icon>
              <ion-icon class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
              <ion-icon class="right-icons" src="assets/images/icons-add-new-event.svg" (click)="openCalModal()" ></ion-icon>
            </ion-row> 
          </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 [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" [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>
      </div>

      <!-- Calendar currente date -->
      <ion-row class="ion-justify-content-between ion-align-items-center currente-date-timelien">
        <ion-row class="timeline-date">
          <span *ngIf="timelineIsCurrentDate()">Hoje, </span> {{ timelineDate }}
        </ion-row>
    <!--     <ion-row class="filter ion-align-items-center">
          <div class="filter-name">Todos</div>
          <ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
        </ion-row> -->
      </ion-row>
    </div>
  </div>
</div>
</ion-header>
<ion-content>

  <!-- Progress bar -->
  <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>

  <!-- Timeline -->
  <div *ngIf="showTimeline">
    <mwl-demo-utils-calendar-header class="timeline" 
      [(view)]="view" 
      [(viewDate)]="viewDate"
      [dayStartHour]="0"
      [dayEndHour]="23">
    </mwl-demo-utils-calendar-header>
    
    <div [ngSwitch]="view">
      <mwl-calendar-day-view
        *ngSwitchCase="'day'"
        [viewDate]="viewDate"
        [events]="events"
        (eventClicked)="eventClicked($event)"
      >
      </mwl-calendar-day-view>
    </div>
  </div>


</ion-content>