Add generic modal

src/app/pages/agenda/agenda.module.ts

@@ -7,17 +7,17 @@ import { IonicModule } from '@ionic/angular';
 import { AgendaPageRoutingModule } from './agenda-routing.module';
 
 import { AgendaPage } from './agenda.page';
-
-
 import { NgCalendarModule } from 'ionic2-calendar';
 import { CalModalPageModule } from '../cal-modal/cal-modal.module';
 
 import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/pt';
-import { CalendarComponent } from 'src/app/components/calendar/calendar.component';
 import { SharedModule } from 'src/app/shared/shared.module';
-registerLocaleData(localeDe);
+import { NewEventPage } from "src/app/shared/agenda/new-event/new-event.component"
+import { EditEventComponent } from 'src/app/shared/agenda/edit-event/edit-event.component';
+import { ViewEventPage } from 'src/app/shared/agenda/view-event/view-event.page';
 
+registerLocaleData(localeDe);
 
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
@@ -36,7 +36,12 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
     NgCalendarModule,
     CalModalPageModule,
   ],
-  declarations: [AgendaPage, CalendarComponent],
+  declarations: [
+    AgendaPage, 
+    NewEventPage,
+    EditEventComponent,
+    ViewEventPage
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [
     { provide: LOCALE_ID, useValue: 'pt-PT'}

src/app/pages/agenda/agenda.page.html

@@ -1,279 +1,321 @@
-<ion-header>
-  <app-header></app-header>
+<ion-header class="ion-no-border bg-blue">
+  <app-header class="bg-blue"></app-header>
 </ion-header>
-<ion-header>
-  <div class="bg-blue">
-  <div class="main-content">
-  <!-- Toolbar -->
-    <ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
-    <div>
-      <!--  Calendar is here -->
-      <div [ngSwitch]="segment">
-        <div class="calendar-container" *ngSwitchCase="'Combinada'" [style.height]="calendarHeight">
 
-          <ion-row class="ion-justify-content-between calendar-tool-tip">
-            <ion-row class="ion-align-items-center">
-              <!-- Move back one screen of the slides -->
+<ion-content id="timeline-conteiner agenda-container" class="timeline bg-blue">
+
+  <div class="d-flex bg-blue container-wrapper">
+    
+    <div class="calendar-timeline bg-blue">
+      <div class="calendar-wrapper">
+        
+        <div class="main-content">
+        <!-- Toolbar -->
+        <ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+        <div>
+          <!--  Calendar is here -->
+          <div [ngSwitch]="segment">
+            <div class="calendar-container" *ngSwitchCase="'Combinada'" [style.height]="calendarHeight">
+      
+              <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  *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
+                  <ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
+                  <ion-icon (click)="viewEventsToApprove()" class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
+                  <ion-icon (click)="openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
+                </ion-row> 
+              </ion-row> 
               
-              <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>
+              <table class="custom-calendar-header">
+                <thead>
+                  <th>S</th>
+                  <th>T</th>
+                  <th>Q</th>
+                  <th>Q</th>
+                  <th>S</th>
+                  <th>S</th>
+                  <th>D</th>
+                </thead>
+              </table>
+      
+              <calendar  
+                class="calendar-component"
+                [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>
-              </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>
-
+              </ng-template>
+            </div>
+            <div class="calendar-container" *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>
+            
+      
+              <table class="custom-calendar-header">
+                <thead>
+                  <th>S</th>
+                  <th>T</th>
+                  <th>Q</th>
+                  <th>Q</th>
+                  <th>S</th>
+                  <th>S</th>
+                  <th>D</th>
+                </thead>
+              </table>
+      
+              <calendar 
+                class="calendar-component"
+                [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 class="calendar-container" *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>
+              
+      
+              <table class="custom-calendar-header">
+                <thead>
+                  <th>S</th>
+                  <th>T</th>
+                  <th>Q</th>
+                  <th>Q</th>
+                  <th>S</th>
+                  <th>S</th>
+                  <th>D</th>
+                </thead>
+              </table>
+              
+              <calendar 
+                class="calendar-component"
+                [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>
+      
+          <div class="calendar-border">
+            
+          </div>
+      
+      
+          <!-- Calendar currente date -->
+          <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
+            <ion-row class="timeline-date align-center">
+              <ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
+              <ion-icon *ngIf="!showCalendar" (click)="calendarHeight='430.5px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
+            </ion-row>
+            <ion-row class="timeline-date align-center">
+              <span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
+            </ion-row>
+            <ion-row class="filter ion-align-items-center">
+              <div class="filter-name">{{timelineFilterState}}</div>
+              <!-- Icon -->
+              <ion-icon (click)="showTimelineFilterState=true" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
+              <!-- List -->
+              <ul *ngIf="showTimelineFilterState">
+                <li [class.active]="timelineFilterState == 'Todos' " (click)="timelineFilter('Todos')">Todos</li>
+                <li [class.active]="timelineFilterState == 'Oficial' " (click)="timelineFilter('Oficial')">Oficial</li>
+                <li [class.active]="timelineFilterState == 'Pessoal' " (click)="timelineFilter('Pessoal')">Pessoal</li>
+              </ul>
             </ion-row>
-            <ion-row class="ion-align-items-center">
-              <ion-icon  *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
-              <ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
-              <ion-icon (click)="viewEventsToApprove()" class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
-              <ion-icon (click)="openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
-            </ion-row> 
-          </ion-row> 
-          
-          <table class="custom-calendar-header">
-            <thead>
-              <th>S</th>
-              <th>T</th>
-              <th>Q</th>
-              <th>Q</th>
-              <th>S</th>
-              <th>S</th>
-              <th>D</th>
-            </thead>
-          </table>
-
-          <calendar  
-            class="calendar-component"
-            [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 class="calendar-container" *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>
-        
-
-          <table class="custom-calendar-header">
-            <thead>
-              <th>S</th>
-              <th>T</th>
-              <th>Q</th>
-              <th>Q</th>
-              <th>S</th>
-              <th>S</th>
-              <th>D</th>
-            </thead>
-          </table>
-
-          <calendar 
-            class="calendar-component"
-            [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 class="calendar-container" *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>
-          
+        </div>
 
-          <table class="custom-calendar-header">
-            <thead>
-              <th>S</th>
-              <th>T</th>
-              <th>Q</th>
-              <th>Q</th>
-              <th>S</th>
-              <th>S</th>
-              <th>D</th>
-            </thead>
-          </table>
+      </div>
+      <div class="timeline-wrapper"  [style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% - ('+calendarHeight+' + 84.5px))')" >
+          <!-- Progress bar -->
+        <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+          <ion-refresher-content>
+          </ion-refresher-content>
+        </ion-refresher>
+
+        <!-- Timeline -->
+        <div class="timeline-container"  *ngIf="showTimeline">
+          <mwl-demo-utils-calendar-header class="timeline" 
+            [(view)]="view" 
+            [(viewDate)]="viewDate"
+            [dayStartHour]="0"
+            [dayEndHour]="23">
+          </mwl-demo-utils-calendar-header>
           
-          <calendar 
-            class="calendar-component"
-            [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 [ngSwitch]="view">
+            <mwl-calendar-day-view
+              *ngSwitchCase="'day'"
+              [viewDate]="viewDate"
+              [events]="events"
+              (eventClicked)="eventClicked($event)"
+            >
+            </mwl-calendar-day-view>
+          </div>
         </div>
       </div>
+    </div>
 
-      <div class="calendar-border">
+    <div class="event-details  bg-blue ">
+      
+      <!-- New -->
+      <app-new-event *ngIf="mobileComponent.showAddNewEvent"
+        style="height: 100%;display: flex;flex-wrap: wrap;"
+
+        [profile]="profile"
+        [selectedSegment]=segment
+        [selectedDate]="eventSelectedDate"
+        (onAddEvent)="openAddEventDismiss($event)"
         
-      </div>
+      ></app-new-event>
+      <!-- Edit -->
+      <app-edit-event *ngIf="mobileComponent.showEditEvent"
+        style="height: 100%;display: flex;flex-wrap: wrap;"
+        
+        [profile]="profile"
+        [selectedSegment]="segment"
+        [postEvent]="postEvent"
+        (cloneAllmobileComponent)="cloneAllmobileComponent($event)"
 
+      ></app-edit-event>
 
-      <!-- Calendar currente date -->
-      <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
-        <ion-row class="timeline-date align-center">
-          <ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
-          <ion-icon *ngIf="!showCalendar" (click)="calendarHeight='347px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
-        </ion-row>
-        <ion-row class="timeline-date align-center">
-          <span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
-        </ion-row>
-        <ion-row class="filter ion-align-items-center">
-          <div class="filter-name">{{timelineFilterState}}</div>
-          <!-- Icon -->
-          <ion-icon (click)="showTimelineFilterState=true" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
-          <!-- List -->
-          <ul *ngIf="showTimelineFilterState">
-            <li [class.active]="timelineFilterState == 'Todos' " (click)="timelineFilter('Todos')">Todos</li>
-            <li [class.active]="timelineFilterState == 'Oficial' " (click)="timelineFilter('Oficial')">Oficial</li>
-            <li [class.active]="timelineFilterState == 'Pessoal' " (click)="timelineFilter('Pessoal')">Pessoal</li>
-          </ul>
-        </ion-row>
-      </ion-row>
+      <!-- View -->
+      <app-view-event *ngIf="mobileComponent.showEventDitails"
+        [profile]="profile"
+        [eventId]="selectedEventId"
+
+        (viewEventDetailDismiss)="viewEventDetailDismiss($event)"
+      ></app-view-event>
 
     </div>
-  </div>
-</div>
-</ion-header>
-<ion-content id="timeline-conteiner" class="timeline">
 
-  <!-- Progress bar -->
-  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-    <ion-refresher-content>
-    </ion-refresher-content>
-  </ion-refresher>
-
-  <!-- Timeline -->
-  <div class="timeline-container"  *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>

src/app/pages/agenda/agenda.page.scss

@@ -464,16 +464,21 @@ td.monthview-primary-with-event {
 
 .timeline-header{
   z-index: 1000000;
-  position: absolute;
   width: 100%;
   background-color: white;
 }
 
 
 .timeline-container{
-  margin-top: 67px;
+  
 }
 
+.calendar-timeline{
+
+  height: 100%;
+  background-color: white;
+  border-top-left-radius: 25px;
+}
 
 .calendar-border{
   background: #ebebeb;
@@ -484,6 +489,58 @@ td.monthview-primary-with-event {
 
 .calendar-progress-bar{
   position: absolute;
-  width: calc(100% - 20px);
+  width: 100%;
   margin-left: 10px;
+}
+
+
+.agenda-container{
+  overflow: hidden;
+}
+
+.container-wrapper{
+  height: 100%;
+  .calendar-timeline{
+    flex-wrap: wrap;
+    border-top-right-radius: 24px;
+    width: calc(100%);
+
+    .calendar-wrapper{
+      width: 100%;
+    }
+
+    .timeline-wrapper{
+      width: 100%;
+      overflow: scroll;
+      overflow-x: hidden; 
+    }
+  }
+}
+
+.event-details{
+  width: 100%;
+  background: white;
+  border-top-right-radius: 25px;
+}
+
+
+.event-details{
+  // width: 411px;
+  display: none;
+}
+
+
+@media only screen and (min-width: 1024px) {
+  .container-wrapper{
+    height: 100%;
+    
+    .calendar-timeline{
+      flex-wrap: wrap;
+      border-top-right-radius: 0px;
+      width: calc(100% - 40%);
+    }
+  }
+  .event-details{
+    display: block;
+  }
 }

src/app/pages/agenda/agenda.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, Inject, LOCALE_ID } from '@angular/core';
+import { Component, OnInit, ViewChild, Inject, LOCALE_ID, Input } from '@angular/core';
 import { CalendarComponent } from 'ionic2-calendar';
 import { AlertController, ModalController } from '@ionic/angular';
 import { CalModalPage } from '../cal-modal/cal-modal.page';
@@ -8,7 +8,8 @@ import { Router, NavigationEnd } from '@angular/router';
 import { AlertService } from 'src/app/services/alert.service';
 import { NewEventPage } from './new-event/new-event.page';
 import { ViewEventPage } from './view-event/view-event.page';
-import { momentG }  from 'src/plugin/momentG'
+import { momentG }  from 'src/plugin/momentG';
+import {DomSanitizer} from "@angular/platform-browser";
 
 // showTimeline
 import { setHours, setMinutes } from 'date-fns';
@@ -80,6 +81,10 @@ export class AgendaPage implements OnInit {
   rangeStartDate: Date;
   rangeEndDate: Date;
 
+  selectedEvent: Event;
+  selectedEventId: string | number;
+  postEvent: any;
+
   @ViewChild(CalendarComponent) myCal: CalendarComponent;
 
   segment:string;
@@ -98,6 +103,11 @@ export class AgendaPage implements OnInit {
   endTime: Date;
 
 
+  mobileComponent: any = {
+    showAddNewEvent: false,
+    showEditEvent: false,
+    showEventDitails: false,
+  }
 
   constructor( 
     private alertCtrl: AlertController,
@@ -105,7 +115,8 @@ export class AgendaPage implements OnInit {
     private modalCtrl: ModalController,
     private eventService: EventsService,
     private router: Router,
-    private alertCrontroller: AlertService
+    private alertCrontroller: AlertService,
+    private sanitizer: DomSanitizer
     ) {
 
       this.calendarHeight = "347px";
@@ -155,10 +166,21 @@ export class AgendaPage implements OnInit {
   // Show information of the event for timeline
   eventClicked({ event }: { event: CalendarEvent }): void {
     console.log('Event clicked', event);
-    
+
+    // this.selectedEvent = event;
+
     this.eventSelectedDate =  event.start;
-    this.viewEventDetail(event.id);
-    /* this.router.navigate(["/home/agenda", event.id, 'agenda']); */
+    this.selectedEventId = event.id;
+
+    // this.viewEventDetail(event.id);
+
+    if( window.innerWidth <= 1024){
+      this.router.navigate(["/home/agenda", event.id, 'agenda']);
+    } else {
+      this.cloneAllmobileComponent();
+      this.mobileComponent.showEventDitails = true;
+    }
+
   }
 
   //Show information of the event
@@ -263,16 +285,11 @@ export class AgendaPage implements OnInit {
     // auto scroll timeline
     setTimeout(() => {
       const timelineMarker = document.querySelector('.cal-current-time-marker');
-
-      const timelineContainer = document.querySelector('ion-content#timeline-conteiner');
-
-      const shadowRoot = timelineContainer.shadowRoot;
-
-      const scrollContainer = shadowRoot.querySelector('main');
+      const scrollContainer = document.querySelector('.timeline-wrapper');
 
       try {
         scrollContainer.scroll({
-          top: timelineMarker['offsetTop'] - ((scrollContainer.offsetHeight/2) - 60),
+          top: timelineMarker['offsetTop'] - ((scrollContainer['offsetHeight']/2) - 60),
           left: 0, 
           behavior: 'smooth' 
         })
@@ -280,7 +297,6 @@ export class AgendaPage implements OnInit {
         //
       }
       
-      
     }, timeout);
   }
 
@@ -589,33 +605,45 @@ export class AgendaPage implements OnInit {
   }
 
   async openAddEvent() {
-    const modal = await this.modalCtrl.create({
-      component: NewEventPage,
-      componentProps:{
-        segment: this.segment,
-        profile: this.profile,
-        eventSelectedDate: this.eventSelectedDate
-      },
-      cssClass: 'modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then((data) => {
-      let postEvent: Event = data['data'];
-      if (postEvent.Subject != null)
-      {
-        this.eventSource.push({
-          title: postEvent.Subject,
-          startTime: new Date(postEvent.StartDate),
-          endTime: new Date(postEvent.EndDate),
-          allDay: false,
-          event: postEvent
-        });
-        this.myCal.update();
-        this.myCal.loadEvents();
-        this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
-      }
-    });
+
+    if( window.innerWidth <= 1024){
+      const modal = await this.modalCtrl.create({
+        component: NewEventPage,
+        componentProps:{
+          segment: this.segment,
+          profile: this.profile,
+          eventSelectedDate: this.eventSelectedDate
+        },
+        cssClass: 'modal',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss().then((data) => {
+        this.openAddEventDismiss(data['data'])
+      });
+    } else {
+      this.mobileComponent.showAddNewEvent = true;
+    }
+  }
+
+  openAddEventDismiss(data){
+    this.cloneAllmobileComponent();
+    
+    let postEvent: Event = data;
+    if (postEvent.Subject != null)
+    {
+      this.eventSource.push({
+        title: postEvent.Subject,
+        startTime: new Date(postEvent.StartDate),
+        endTime: new Date(postEvent.EndDate),
+        allDay: false,
+        event: postEvent
+      });
+      this.myCal.update();
+      this.myCal.loadEvents();
+      this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
+    }
+    this.mobileComponent.showAddNewEvent = false;
   }
 
   async viewEventDetail(eventId:any) {
@@ -632,12 +660,29 @@ export class AgendaPage implements OnInit {
     await modal.present();
     modal.onDidDismiss().then((res)=>{
       if(res){
-        console.log(res);
-        this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
+        this.viewEventDetailDismiss(res);
       }
     });
   }
 
+  async viewEventDetailDismiss(data){
+    
+    await this.cloneAllmobileComponent()
+
+    if (data.type == 'edit'){
+      
+      this.selectedEvent = data.event;
+      this.postEvent = data.event;
+
+      console.log(this.selectedEvent);
+
+      this.mobileComponent.showEditEvent = true;
+
+    }
+
+    this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
+  }
+
   async viewEventsToApprove(){
     const modal = await this.modalCtrl.create({
       component: EventListPage,
@@ -649,4 +694,15 @@ export class AgendaPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   } 
+
+  async cloneAllmobileComponent(){
+    
+    this.mobileComponent= {
+      showAddNewEvent: false,
+      showEditEvent: false,
+      showEventDitails: false,
+    }
+
+  }
+
 }

src/app/pages/agenda/edit-event/edit-event.page.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { AlertController, ModalController, NavParams } from '@ionic/angular';
-import { AuthConnstants } from 'src/app/config/auth-constants';
-import { Attachment } from 'src/app/models/attachment.model';
 import { EventBody } from 'src/app/models/eventbody.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { AlertService } from 'src/app/services/alert.service';

src/app/pages/agenda/new-event/new-event.page.html

@@ -204,7 +204,7 @@
   </div>    
 </ion-content>
 <ion-footer class="ion-no-border">
-  <ion-toolbar class="btn-div">
+  <ion-toolbar class="btn-div ">
     <ion-buttons slot="start">
       <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
         <ion-label>Cancelar</ion-label>

src/app/pages/agenda/view-event/view-event.page.ts

@@ -126,6 +126,4 @@ export class ViewEventPage implements OnInit {
     browser.show();
   }
 
-
-
 }