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="stacked">Assunto</ion-label>
    <ion-input tpye="text" [(ngModel)]="event.title"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="stacked">Descrição</ion-label>
    <ion-input tpye="text" [(ngModel)]="event.desc"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="stacked">Localização</ion-label>
    <ion-input tpye="text" [(ngModel)]="event.place"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="stacked">Intervenientes</ion-label>
    <ion-input tpye="text" [(ngModel)]="event.people"></ion-input>
  </ion-item>
  <ion-list>
    <ion-radio-group value="biff">
      <ion-item class="radio-button" lines="none">
        <ion-label>Oficial</ion-label>
        <ion-radio [(ngModel)]="event.type" slot="start" value="biff"></ion-radio>
      </ion-item>
  
      <ion-item class="radio-button" lines="none">
        <ion-label>Pessoal</ion-label>
        <ion-radio slot="start" value="griff"></ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
  <ion-item>
    <ion-label>Selecione o tipo de evento</ion-label>
    <ion-select 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>Data Início</ion-label>
    <ion-datetime value="2005-06-17T11:06Z" min="1990" max="2020"
      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>Data Fim</ion-label>
    <ion-datetime value="2005-06-17T11:06Z" min="1990" max="2020"
      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>
      <ion-icon name="add" slot="end"></ion-icon>
      <ion-label class="attach-label">Anexos</ion-label>

    </ion-item>
    <div id="AttachFiles"></div>
      <ion-item lines="none">
        <ion-icon name="attach"></ion-icon>
        <ion-label color="secondary">Lei do orçamento geral do Estado</ion-label> 
        <ion-icon name="trash" slot="end"></ion-icon>
      </ion-item> 
  </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>