Made lots of changes, deleted all components

src/app/pages/cal-modal/cal-modal-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CalModalPage } from './cal-modal.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CalModalPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CalModalPageRoutingModule {}

src/app/pages/cal-modal/cal-modal.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CalModalPageRoutingModule } from './cal-modal-routing.module';
+
+import { CalModalPage } from './cal-modal.page';
+import { NgCalendarModule } from 'ionic2-calendar';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CalModalPageRoutingModule,
+    NgCalendarModule
+  ],
+  declarations: [CalModalPage]
+})
+export class CalModalPageModule {}

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

@@ -0,0 +1,98 @@
+<ion-toolbar color="primary">
+  <ion-buttons slot="start">
+    <ion-button (click)="close()">
+      <ion-label>Cancelar</ion-label>
+      <ion-icon name="close" slot="icon-only"></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="icon-only"></ion-icon>
+    </ion-button>
+  </ion-buttons>
+</ion-toolbar>
+
+<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.title"></ion-input>
+  </ion-item>
+  <ion-item>
+    <ion-label position="stacked">Intervenientes</ion-label>
+    <ion-input tpye="text" [(ngModel)]="event.desc"></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 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="brown">Reunião</ion-select-option>
+      <ion-select-option value="blonde">Viagem</ion-select-option>
+      <ion-select-option value="black">Conferência</ion-select-option>
+      <ion-select-option value="red">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>
+  <ion-item>
+    <ion-label>Selecione a frequência do evento</ion-label>
+    <ion-select interface="action-sheet" class="custom-options" Cancel-text="Cancelar">
+      <ion-select-option value="brown">Único</ion-select-option>
+      <ion-select-option value="blonde">Diário</ion-select-option>
+      <ion-select-option value="black">Semanal</ion-select-option>
+      <ion-select-option value="red">Mensal</ion-select-option>
+    </ion-select>
+  </ion-item>
+  <div class="attach-div">
+    <ion-label class="attach-label">Anexos</ion-label>
+    <ion-item lines="none">
+      <ion-button size="small" slot="start">Adicionar</ion-button>
+    </ion-item>
+  
+    <div id="AttachFiles"></div>
+      <ion-item>
+        <ion-label color="secondary">Lei do orçamento geral do Estado</ion-label> <ion-button size="small" slot="end">Eliminar</ion-button>
+      </ion-item>
+      
+  </div>
+ 
+  <!-- <calendar
+    *ngIf="modalReady"
+    [calendarMode]="calendar.mode"
+    [currentDate]="calendar.currentDate"
+    (onTitleChanged)="onViewTitleChanged($event)"
+    (onTimeSelected)="onTimeSelected($event)"
+    lockSwipes="true"
+  ></calendar> -->
+</ion-content>

src/app/pages/cal-modal/cal-modal.page.scss

@@ -0,0 +1,8 @@
+:host ::ng-deep{
+    .monthview-container {
+        height: auto !important;
+    }
+    .event-detail-container{
+        display: none;
+    }
+}

src/app/pages/cal-modal/cal-modal.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CalModalPage } from './cal-modal.page';
+
+describe('CalModalPage', () => {
+  let component: CalModalPage;
+  let fixture: ComponentFixture<CalModalPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CalModalPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CalModalPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/cal-modal/cal-modal.page.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-cal-modal',
+  templateUrl: './cal-modal.page.html',
+  styleUrls: ['./cal-modal.page.scss'],
+})
+export class CalModalPage implements AfterViewInit {
+
+  calendar = {
+    mode: 'month',
+    currentDate: new Date()
+  };
+  
+  viewTitle: string;
+
+  event = {
+    title: '',
+    desc: '',
+    startTime: null,
+    endTime: null,
+    allDay: true
+  };
+
+  modalReady = false;
+
+  constructor(private modalCtrl: ModalController) { }
+
+  ngOnInit() {
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(()=>{
+      this.modalReady = true;
+    }, 0);
+  }
+
+  save(){
+    this.modalCtrl.dismiss({event: this.event})
+  }
+
+  onViewTitleChanged(title){
+    this.viewTitle = title;
+  }
+
+  onTimeSelected(ev){
+    this.event.startTime = new Date(ev.selectedTime);
+  }
+
+  close(){
+    this.modalCtrl.dismiss();
+  }
+}