Add calendar icons

package-lock.json

@@ -2215,6 +2215,14 @@
         }
       }
     },
+    "@ionic-native/wheel-selector": {
+      "version": "5.31.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/wheel-selector/-/wheel-selector-5.31.1.tgz",
+      "integrity": "sha512-pZIicvLZf1zOrJohhsER6zJikf09Qvrmdh9NfB2ilO2GIJv2sw1JfR45E/BviKehs5t5G1pem1fyLtwOyFSi4Q==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
     "@ionic/angular": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-5.3.1.tgz",
@@ -3081,6 +3089,11 @@
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
       "dev": true
     },
+    "@types/cordova": {
+      "version": "0.0.34",
+      "resolved": "https://registry.npmjs.org/@types/cordova/-/cordova-0.0.34.tgz",
+      "integrity": "sha1-6nrd907Ow9dimCegw54smt3HPQQ="
+    },
     "@types/date-fns": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/@types/date-fns/-/date-fns-0.0.2.tgz",

package.json

@@ -35,6 +35,7 @@
     "@ionic-native/ionic-webview": "^5.30.0",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",
+    "@ionic-native/wheel-selector": "^5.31.1",
     "@ionic/angular": "^5.0.0",
     "@ionic/pwa-elements": "^3.0.1",
     "@ionic/storage": "^2.3.1",

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

@@ -14,172 +14,181 @@
 </ion-toolbar>
 </ion-header>
 <ion-header>
-  <ion-toolbar class="bg-blue">
+  <div class="bg-blue">
   <div class="main-content">
   <!-- Toolbar -->
-  <ion-toolbar>
+    <div>
+      <!--  Calendar is here -->
+      <div [ngSwitch]="segment">
+        <div *ngSwitchCase="'Combinada'">
 
-    <!--  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>
 
-        <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-button fill="clear" (click)="back()">
-              <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
-            </ion-button>
-             <!-- Move forward one screen of the slides -->
-            <h2 class="capitaliseText">{{ viewTitle }}</h2>
-            <ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
-            <!-- Move forward one screen of the slides -->
-            <ion-button fill="clear" (click)="next()">
-              <ion-icon  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
-            </ion-button>
-          </ion-row>
-          <ion-row class="ion-align-items-center">
-            <ion-icon name="add-circle-outline"></ion-icon>
-            <ion-icon name="add-circle-outline"></ion-icon>
-            <ion-icon name="add" (click)="openCalModal()" ></ion-icon>
+              <!-- 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" 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> 
-        </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> -->
+        
+          <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>
-          </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> -->
+          </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>
-          </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> -->
+          </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>
-          </div>
-        </ng-template> 
-  
+          </ng-template> 
+    
+        </div>
       </div>
     </div>
-  </ion-toolbar>
   </div>
-  </ion-toolbar>
+</div>
 </ion-header>
 <ion-content>
 
@@ -202,7 +211,7 @@
     </ion-row>
   </ion-row>
 
-  <!-- Timelien -->
+  <!-- Timeline -->
   <div *ngIf="showTimeline">
     <mwl-demo-utils-calendar-header class="timeline" 
       [(view)]="view" 

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

@@ -289,6 +289,7 @@ label{
   .arrow-down{
     font-size: 28px;
   }
+  
 }
 
 
@@ -316,4 +317,51 @@ label{
     
     }
   }
+}
+
+
+
+.drop-down{
+
+  .drop-down-container{
+    display: none;
+    border-top: 2px solid #42b9fe;
+    position: absolute;
+    background: white;
+    z-index: 100000;
+    box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+    margin-left: -122px;
+    padding: 4px 15px;
+    ul{
+      margin: 0px;
+      padding: 0px;
+      li{
+        list-style: none;
+        height: 35px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+
+
+.capitaliseText{
+  min-width: 159px;
+  text-align: center;
+}
+
+.arrow{
+  padding: 0px 6px;
+}
+
+.right-icons{
+  padding: 0px 4px;
+}
+
+
+.capitaliseText{
+  font-size: 20px;
 }

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

@@ -47,9 +47,23 @@ export class AgendaPage implements OnInit {
     this.view = view;
   }
 
+  monthList = [
+    { name: 'Janeiro', id: 'Jan' },
+    { name: 'Fevereiro', id: 'Feb' },
+    { name: 'Março', id: 'Mar' },
+    { name: 'Abril', id: 'Apr' },
+    { name: 'Maio', id: 'May' },
+    { name: 'Junho', id: 'June' },
+    { name: 'Julho', id: 'July' },
+    { name: 'Agosto', id: 'Aug' },
+    { name: 'Setembro', id: 'Sept' },
+    { name: 'Outubro', id: 'Oct' },
+    { name: 'Novembro', id: 'Nov' },
+    { name: 'Dezembro', id: 'Dec' }
+  ]
+
   showTimeline: boolean= false;
   
-
   events: CalendarEvent[] = [
 /*     {
       title: '123',
@@ -69,8 +83,6 @@ export class AgendaPage implements OnInit {
     }, */
   ];
   
-
-
   /* List of events of our calendar */
   eventSource = [];
   /* The title of the calendar */
@@ -178,9 +190,18 @@ export class AgendaPage implements OnInit {
     this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt');
     this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt'));
     // calendar change date
-    this.eventSelectedDate =  ev;
+    console.log('!!this!!')
+    this.eventSelectedDate = new Date(ev);
   };
 
+  // changedate
+  dropDownChangeDate(id: string){
+
+    const currentCandarDayYear = formatDate(this.eventSelectedDate,'dd -- yyyy', 'pt');
+    const newDate = new Date(currentCandarDayYear.replace('--',id));
+    this.onCurrentChanged(newDate);
+  }
+
   /* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
         console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
         this.eventSelectedDate2 = ev.selectedTime;
@@ -243,6 +264,7 @@ export class AgendaPage implements OnInit {
   loadRangeEvents(startTime: Date, endTime: Date){
     
     console.log('Update date');
+    console.log('start ',startTime,' end', endTime)
 
     this.showTimeline = false;
     this.showLoader = true;
@@ -293,9 +315,6 @@ export class AgendaPage implements OnInit {
               this.showTimeline = true;
              
             });
-
-
-            
     
         }
         else{
@@ -423,6 +442,4 @@ export class AgendaPage implements OnInit {
       this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
     }
   }
-
-  
 }

src/assets/images/icons-add-new-event.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-345 -109) translate(0 109) translate(345)">
+                    <g>
+                        <path fill="#FFF" d="M7 7H18V8H7z"/>
+                        <circle cx="10.5" cy="7.5" r="1.5" fill="#FFF"/>
+                        <g fill="#42B9FE">
+                            <circle cx="17.5" cy="17.5" r="17.5"/>
+                        </g>
+                    </g>
+                    <rect width="2" height="15" x="17" y="10" fill="#FFF" rx="1"/>
+                    <rect width="2" height="15" x="17" y="10" fill="#FFF" rx="1" transform="rotate(90 18 17.5)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/icons-received-event.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g transform="translate(-290 -109) translate(0 109) translate(290)">
+                        <path fill="#FFF" d="M7 7H18V8H7z"/>
+                        <circle cx="10.5" cy="7.5" r="1.5" fill="#FFF"/>
+                        <g fill="#42B9FE">
+                            <circle cx="17.5" cy="17.5" r="17.5"/>
+                        </g>
+                    </g>
+                    <path stroke="#FFF" stroke-linejoin="round" stroke-width="2" d="M8 16L17.5 20 27 16 27 27 8 27z" transform="translate(-290 -109) translate(0 109) translate(290)"/>
+                    <path stroke="#FFF" stroke-linejoin="round" stroke-width="2" d="M10.5 17L10.5 7 24.5 7 24.5 17" transform="translate(-290 -109) translate(0 109) translate(290)"/>
+                    <path stroke="#FFF" stroke-width="2" d="M8 16L10.5 13.5" transform="translate(-290 -109) translate(0 109) translate(290)"/>
+                    <path stroke="#FFF" stroke-width="2" d="M24.5 16L27 13.5" transform="translate(-290 -109) translate(0 109) translate(290) matrix(-1 0 0 1 51.5 0)"/>
+                    <path fill="#FFF" d="M17.5 15.25L15.443 16.332 15.836 14.041 14.171 12.418 16.471 12.084 17.5 10 18.529 12.084 20.829 12.418 19.164 14.041 19.557 16.332z" transform="translate(-290 -109) translate(0 109) translate(290)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/global.scss

@@ -29,6 +29,8 @@
 
 
 // calendar
+// ionic calendar2
+
 td.monthview-current{
     color: white;
     /* border-radius: 89px; */
@@ -57,6 +59,14 @@ td.monthview-selected {
     color: black !important;
 }  
 
+.event-detail-container{
+    display: none;
+}
+
+.cal-week-view {
+    border-top: none !important;
+}
+
 
 /* Timeline */
 
@@ -133,16 +143,7 @@ td.monthview-selected {
     display: none;
 }
 
-// ionic calendar2
-.event-detail-container{
-    display: none;
-}
-
-.cal-week-view {
-    border-top: none !important;
-}
-
 .timeline-box-{}
 /* angular-cli file: src/styles.css */
 @import "../node_modules/angular-calendar/css/angular-calendar.css";
-
+@import "./style/main.scss";