fix

package-lock.json

@@ -7325,6 +7325,11 @@
         "ipaddr.js": "^1.9.0"
       }
     },
+    "ionic2-calendar": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/ionic2-calendar/-/ionic2-calendar-0.6.6.tgz",
+      "integrity": "sha512-ytlaVoz8Olq4k04Vaf/xuhDeoWEbdeCB/9kqTMnZgWfTkA+M87X72V4pyDtKEm1G+nDwxSboBRlYLDj9wtXdIA=="
+    },
     "ionicons": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.2.3.tgz",

package.json

@@ -33,6 +33,7 @@
     "cordova-plugin-calendar": "^5.1.5",
     "cordova-plugin-device": "^2.0.3",
     "cordova-plugin-file": "^6.0.2",
+    "ionic2-calendar": "^0.6.6",
     "rxjs": "^6.5.5",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.3"

src/app/app.module.ts

@@ -14,12 +14,15 @@ import { HttpClientModule } from '@angular/common/http'
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import { NgCalendarModule  } from 'ionic2-calendar';
+
 
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
   imports: [BrowserModule, IonicModule.forRoot(), 
     HttpClientModule,
+    NgCalendarModule,
     AppRoutingModule],
   providers: [
     StatusBar,

src/app/merms-calendar/merms-calendar.module.ts

@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
 import { MermsCalendarPageRoutingModule } from './merms-calendar-routing.module';
 
 import { MermsCalendarPage } from './merms-calendar.page';
+import { NgCalendarModule  } from 'ionic2-calendar';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    MermsCalendarPageRoutingModule
+    MermsCalendarPageRoutingModule,
+    NgCalendarModule
   ],
   declarations: [MermsCalendarPage]
 })

src/app/merms-calendar/merms-calendar.page.html

@@ -8,30 +8,33 @@
         <ion-col size="8" class="page-title">Calendar</ion-col>
       </ion-row>
     </ion-grid>
-    <button ion-button (click)="openCalendar()">Open Calendar on Current Date</button>
-{{MyCalendar}}
-    
-<ion-list>
-  <ion-list-header>
-    <hr size="1">
-  </ion-list-header>
 
-  <ion-item *ngFor="let type of calendarData"  (click)="goPatient(type)">
-    <ion-avatar slot="start">
-      <img src="./../../assets/imgs/avatar.svg">
-    </ion-avatar>
-    <ion-label>
-      <h2>{{type.firstname}} {{type.lastname}}</h2>
-      <h3>{{type.reason}}</h3>
-      <p>{{type.appt}} {{type.gender}} , {{type.age}} yrs</p>
-    </ion-label>
-  </ion-item>
+    <calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
+      (onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)" startHour="6"
+      endHour="20" step="30" startingDayWeek="1">
+    </calendar>
 
- 
-</ion-list>
+
+    <ion-list>
+      <ion-list-header>
+        <hr size="1">
+      </ion-list-header>
+
+      <ion-item *ngFor="let type of calendarData" (click)="goPatient(type)">
+        <ion-avatar slot="start">
+          <img src="./../../assets/imgs/avatar.svg">
+        </ion-avatar>
+        <ion-label>
+          <h2>{{type.firstname}} {{type.lastname}}</h2>
+          <h3>{{type.reason}}</h3>
+          <p>{{type.appt}} {{type.gender}} , {{type.age}} yrs</p>
+        </ion-label>
+      </ion-item>
+
+
+    </ion-list>
 
   </div>
 
 
-</ion-content>
-
+</ion-content>

src/app/merms-calendar/merms-calendar.page.scss

@@ -47,6 +47,100 @@
       }
     }
   
+    //=====================
+    #v-cal .vcal-header__label {
+        text-align: center;
+        width: 100%;
+        margin-left: 5%;
+        font-size: 18px;
+        margin-bottom: 7px;
+    }
+
+    #v-cal {
+        .vcal-body {
+            div.vcal-date.vcal-date--active.vcal-date--today {
+                span {
+                    /* border-radius: 0; */
+                    /* box-shadow: 0 0 0 2px rgba(96, 99, 224, 0.1); */
+                    background: rgba(96, 99, 224, 0.1) !important;
+                }
+            }
+        }
+    }
+
+    .vcal-btn {
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -webkit-appearance: button;
+        background: none;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        line-height: normal;
+        width: 20px;
+        height: 20px;
+        outline: none;
+        overflow: visible;
+        padding: 0;
+        text-align: center;
+        &:active {
+            border-radius: var(--vcal-border-radius);
+            box-shadow: 0 0 0 2px rgba(var(--vcal-today-bg-color), 0.1);
+        }
+       
+    }
+    
+    .vcal-header {
+        align-items: center;
+        display: flex;
+        padding: 1.2rem 1.4rem 1rem;
+    }
+
+    
+.vcal-header svg {
+    fill: #89969f;
+}
+
+.vcal-header__label {
+    text-align: center;
+    width: 100%;
+}
+
+.vcal-week {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 2.8rem;
+    border-bottom: 1px solid rgba(137, 150, 159, 0.3);
+}
+
+.vcal-week span {
+    flex-direction: column;
+    flex: 0 0 14.28%;
+    font-size: 1.2rem;
+    max-width: 14.28%;
+    padding: 1.2rem 1.4rem;
+    text-align: center;
+    text-transform: uppercase;
+    color: #89969f;
+}
+
+:host>>>.vcal-date {
+    background-color: green;
+}
+
+body ::ng-deep .vcal-date--active {
+    background-color: green;
+}
+
+.vcal-date--active {
+    cursor: pointer;
+}
+
+.vcal-date--today {
+    color: #6063ea;
+}
+//===========================
     .bottom-container {
       margin-top: 6vh;
       display: block;

src/app/merms-calendar/merms-calendar.page.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit,ViewChild } from '@angular/core';
-import { Calendar } from '@ionic-native/calendar/ngx';
+import { Component, OnInit, ViewChild } from '@angular/core';
+//import { Calendar } from '@ionic-native/calendar/ngx';
+
 
 @Component({
   selector: 'app-merms-calendar',
@@ -8,36 +9,53 @@ import { Calendar } from '@ionic-native/calendar/ngx';
 })
 export class MermsCalendarPage implements OnInit {
 
-  
-@ViewChild(Calendar) mycal: Calendar;
- 
-MyCalendar:any;
-calendarData:any;
+  eventSource = [];
+  viewTitle: string;
 
-constructor(private calendar: Calendar) {
+  calendar = {
+    mode: 'month',
+    currentDate: new Date(),
+  };
 
- // this.MyCalendar=calendar;
-  /*
-  this.calendar.createCalendar('MyCalendar').then(
-    (msg) => { console.log(msg); },
-    (err) => { console.log(err); }
-  );
-*/
+  selectedDate: Date;
 
- }
- goPatient(){
-   
- }
- openCalendar(){
-  this.calendar.openCalendar(new Date()).then(
+
+
+  //https://www.npmjs.com/package/ionic2-calendar
+
+  MyCalendar: any;
+  calendarData: any;
+
+  constructor() {
+
+    // this.MyCalendar=calendar;
+    /*
+    this.calendar.createCalendar('MyCalendar').then(
       (msg) => { console.log(msg); },
       (err) => { console.log(err); }
-  );
-}
+    );
+  */
+    //this.addCalendarToPage();
+  }
+  // Change current month/week/day
 
-goBack(){
 
-}
+  onEventSelected(eEvent:any){
+
+  }
+
+  onViewTitleChanged(eEvent:any){
+
+  }
+
+  goPatient() {
+
+  }
+
+
+  goBack() {
+
+  }
 
   ngOnInit() {
   }