doneit-web/src/app/pages/cal-modal/cal-modal.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="close()">
        <ion-icon name="chevron-back" slot="start"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Novo Evento</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="div-ion-content">
  <ion-item>
    <ion-label position="floating">Assunto</ion-label>
    <ion-input type="text" [(ngModel)]="postEvent.Subject" name="subject"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Descrição</ion-label>
    <ion-input type="text" [(ngModel)]="postEvent.Body.Text"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Localização</ion-label>
    <ion-input type="text" [(ngModel)]="postEvent.Location" name="location"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Selecione a Agenda</ion-label>
    <ion-select selectedText="{{postEvent.CalendarName}}" [(ngModel)]="postEvent.CalendarName" name="calendarName" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
      <ion-select-option Pessoal="Reunião">Pessoal</ion-select-option>
      <ion-select-option Oficial="Viagem">Oficial</ion-select-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Tipo de evento</ion-label>
    <ion-select  [(ngModel)]="postEvent.EventType" interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
      <ion-select-option value="Reunião">Reunião</ion-select-option>
      <ion-select-option value="Viagem">Viagem</ion-select-option>
      <ion-select-option value="Conferência">Conferência</ion-select-option>
      <ion-select-option value="Encontro">Encontro</ion-select-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Data Início</ion-label> 
    <ion-datetime placeholder="{{postEvent.StartDate | date: 'dd MMM yyyy H:mm'}}" [(ngModel)]="postEvent.StartDate" min="2020" max="2100"
      displayFormat="D MMM YYYY H:mm"
      monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Data Fim</ion-label>
    <ion-datetime placeholder="{{postEvent.EndDate | date: 'dd MMM yyyy H:mm'}}" [(ngModel)]="postEvent.EndDate" min="2020" max="2100"
      displayFormat="D MMM YYYY H:mm"
      monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"></ion-datetime>
  </ion-item>
  <div class="div-attach">
    <ion-item lines="none">
      <ion-icon name="add" slot="end" (click)="openAttendees()"></ion-icon>
      <ion-label class="attach-label">Participantes</ion-label>
    </ion-item>
    <div id="AttachFiles"></div>
  </div>
  <div class="div-attach">
    <ion-item lines="none">
      <ion-icon name="add" slot="end" (click)="showAlert()"></ion-icon>
      <ion-label class="attach-label">Anexos</ion-label>
    </ion-item>
    <div id="AttachFiles"></div>
  </div>
</div> 
</ion-content>
<ion-footer class="ion-no-border">
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="close()">
        <ion-label>Cancelar</ion-label>
        <ion-icon name="close" slot="start"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{ viewTitle }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="save()">
        <ion-label>Enviar</ion-label>
        <ion-icon name="checkmark" slot="start"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>