From 14be6492eb8898036c0c8d4ffc62786942095352 Mon Sep 17 00:00:00 2001 From: Olu Amey Date: Tue, 8 Dec 2020 17:36:30 -0500 Subject: [PATCH] fix --- package-lock.json | 5 + package.json | 1 + src/app/app.module.ts | 3 + .../merms-calendar/merms-calendar.module.ts | 4 +- .../merms-calendar/merms-calendar.page.html | 45 ++++----- .../merms-calendar/merms-calendar.page.scss | 94 +++++++++++++++++++ src/app/merms-calendar/merms-calendar.page.ts | 68 +++++++++----- 7 files changed, 173 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0f97edb..5a6e626 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3c4ac7f..0b4f76f 100644 --- a/package.json +++ b/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" diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a1bcf86..756b5a9 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/merms-calendar/merms-calendar.module.ts b/src/app/merms-calendar/merms-calendar.module.ts index 583f9cf..393d86f 100644 --- a/src/app/merms-calendar/merms-calendar.module.ts +++ b/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] }) diff --git a/src/app/merms-calendar/merms-calendar.page.html b/src/app/merms-calendar/merms-calendar.page.html index d962464..db36790 100644 --- a/src/app/merms-calendar/merms-calendar.page.html +++ b/src/app/merms-calendar/merms-calendar.page.html @@ -8,30 +8,33 @@ Calendar - -{{MyCalendar}} - - - -
- - - - - - -

{{type.firstname}} {{type.lastname}}

-

{{type.reason}}

-

{{type.appt}} {{type.gender}} , {{type.age}} yrs

- - + + - - + + + +
+ + + + + + + +

{{type.firstname}} {{type.lastname}}

+

{{type.reason}}

+

{{type.appt}} {{type.gender}} , {{type.age}} yrs

+ + + + + - - + \ No newline at end of file diff --git a/src/app/merms-calendar/merms-calendar.page.scss b/src/app/merms-calendar/merms-calendar.page.scss index 39cb762..9a65021 100644 --- a/src/app/merms-calendar/merms-calendar.page.scss +++ b/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; diff --git a/src/app/merms-calendar/merms-calendar.page.ts b/src/app/merms-calendar/merms-calendar.page.ts index 76a29ea..adf3a6e 100644 --- a/src/app/merms-calendar/merms-calendar.page.ts +++ b/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() { }