Add icons

This commit is contained in:
Peter Maquiran
2021-01-22 16:00:37 +01:00
parent dec8c22856
commit f3ab852223
11 changed files with 344 additions and 175 deletions
+90 -3
View File
@@ -413,6 +413,21 @@
}
}
},
"@angular/animations": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.1.0.tgz",
"integrity": "sha512-VgpknW33WJiqnNtQwNVWrpiSxkgoChIZLpYLlijSTvFwZOHiraFKApohaW8X61mwL0HuK1RB7Z36B+Q11cw3aw==",
"requires": {
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
}
}
},
"@angular/cli": {
"version": "9.1.12",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.12.tgz",
@@ -2905,6 +2920,11 @@
"tslib": "^1.9.0"
}
},
"@mattlewis92/dom-autoscroller": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/@mattlewis92/dom-autoscroller/-/dom-autoscroller-2.4.2.tgz",
"integrity": "sha512-YbrUWREPGEjE/FU6foXcAT1YbVwqD/jkYnY1dFb0o4AxtP3s4xKBthlELjndZih8uwsDWgQZx1eNskRNe2BgZQ=="
},
"@netflix/nerror": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@netflix/nerror/-/nerror-1.1.3.tgz",
@@ -2922,6 +2942,21 @@
}
}
},
"@ng-bootstrap/ng-bootstrap": {
"version": "9.0.1",
"resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-9.0.1.tgz",
"integrity": "sha512-dJFoK2mRsj/zL87PNv9frBD+72MkrMeFshXE26FKPf8P8JNFoL6zrcNLxlBouQ1rWBItH50BmlEqQOwyXazF7w==",
"requires": {
"tslib": "^2.0.0"
},
"dependencies": {
"tslib": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
"integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
}
}
},
"@ngtools/webpack": {
"version": "9.1.12",
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.12.tgz",
@@ -2985,6 +3020,11 @@
}
}
},
"@scarf/scarf": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.1.0.tgz",
"integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg=="
},
"@schematics/angular": {
"version": "9.1.12",
"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.12.tgz",
@@ -3433,6 +3473,43 @@
"semver": "^5.4.1"
}
},
"angular-calendar": {
"version": "0.28.22",
"resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.28.22.tgz",
"integrity": "sha512-jcLszdvSI6+iSYEIqyQjPK5kgGAXaMoGKKGyDpmjy0nRIdaBGMzoveKr/OyiSx1B1oyxRVjj4Ig60n1/BzXmpw==",
"requires": {
"@scarf/scarf": "^1.1.0",
"angular-draggable-droppable": "^4.5.5",
"angular-resizable-element": "^3.3.3",
"calendar-utils": "^0.8.3",
"positioning": "^2.0.1",
"tslib": "^1.14.1"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"angular-draggable-droppable": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-4.6.0.tgz",
"integrity": "sha512-+8JhTDMKkc/NuFFqb8/H/QHpB+v4Z7YNrgvEbV+PQxXry19rkr89ofZgjNIXhZexTvJNb03BYlSQoknzXE9b3g==",
"requires": {
"@mattlewis92/dom-autoscroller": "^2.4.2",
"tslib": "^1.9.0"
}
},
"angular-resizable-element": {
"version": "3.3.4",
"resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.3.4.tgz",
"integrity": "sha512-jA3j8qcWXKR+rdXxerAjpKhUsoUlEBQP3CmutHcHRAKTkQjZTd1LcZOZOnfIdOToyXsIKXYscbHpbPoCeew2Yw==",
"requires": {
"tslib": "^1.9.0"
}
},
"angular-swipe": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/angular-swipe/-/angular-swipe-0.4.0.tgz",
@@ -4351,6 +4428,11 @@
"unset-value": "^1.0.0"
}
},
"calendar-utils": {
"version": "0.8.4",
"resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.8.4.tgz",
"integrity": "sha512-0btakIxxHrCMX/7L6jayixKG9OnGIbqAh5oHe0Me2LYAS7zdEUoRxndyN4N04yVyZURgx1iNXj4l5m51/sDShg=="
},
"caller-callsite": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
@@ -5899,9 +5981,9 @@
}
},
"date-fns": {
"version": "2.15.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.15.0.tgz",
"integrity": "sha512-ZCPzAMJZn3rNUvvQIMlXhDr4A+Ar07eLeGsGREoWU19a3Pqf5oYa+ccd+B3F6XVtQY6HANMFdOQ8A+ipFnvJdQ=="
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
"integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ=="
},
"date-format": {
"version": "3.0.0",
@@ -11090,6 +11172,11 @@
}
}
},
"positioning": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/positioning/-/positioning-2.0.1.tgz",
"integrity": "sha512-DsAgM42kV/ObuwlRpAzDTjH9E8fGKkMDJHWFX+kfNXSxh7UCCQxEmdjv/Ws5Ft1XDnt3JT8fIDYeKNSE2TbttA=="
},
"posix-character-classes": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+4 -1
View File
@@ -13,6 +13,7 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^11.1.0",
"@angular/common": "~9.1.6",
"@angular/core": "~9.1.6",
"@angular/forms": "~9.1.6",
@@ -38,6 +39,8 @@
"@ionic/pwa-elements": "^3.0.1",
"@ionic/storage": "^2.3.1",
"@logisticinfotech/ionic4-datepicker": "^1.4.4",
"@ng-bootstrap/ng-bootstrap": "^9.0.1",
"angular-calendar": "^0.28.22",
"angular-tag-cloud-module": "^5.2.2",
"cordova-ios": "6.1.0",
"cordova-plugin-camera": "^5.0.1",
@@ -45,7 +48,7 @@
"cordova-plugin-filepath": "^1.5.8",
"cordova-res": "^0.15.1",
"cordova-sqlite-storage": "^5.1.0",
"date-fns": "^2.15.0",
"date-fns": "^2.16.1",
"ionic-selectable": "^4.5.0",
"ionic2-alpha-scroll": "^2.0.1",
"ionic2-calendar": "^0.6.6",
+14
View File
@@ -19,11 +19,25 @@ import { FilePath } from '@ionic-native/file-path/ngx';
import { Camera } from '@ionic-native/camera/ngx';
import { IonicStorageModule } from '@ionic/storage';
import { PipesModule } from './pipes/pipes.module';
//
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,
CommonModule,
FormsModule,
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory,
}),
IonicModule.forRoot(),
IonicStorageModule.forRoot(),
AppRoutingModule,
-1
View File
@@ -16,7 +16,6 @@ import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/pt';
import { CalendarComponent } from 'src/app/components/calendar/calendar.component';
registerLocaleData(localeDe);
@NgModule({
imports: [
CommonModule,
+29 -4
View File
@@ -46,7 +46,7 @@
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-content>
<!-- Calendar is here -->
@@ -61,7 +61,7 @@
<!-- 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-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
</ion-button>
</ion-col>
<!-- The title of the calendar in the middle -->
@@ -72,7 +72,7 @@
<!-- 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-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
@@ -215,4 +215,29 @@
</ion-fab-button>
</ion-fab>
</div>
</ion-content>
<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate">
</mwl-demo-utils-calendar-header>
<div [ngSwitch]="view">
<mwl-calendar-month-view
*ngSwitchCase="'month'"
[viewDate]="viewDate"
[events]="events"
>
</mwl-calendar-month-view>
<mwl-calendar-week-view
*ngSwitchCase="'week'"
[viewDate]="viewDate"
[events]="events"
>
</mwl-calendar-week-view>
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events"
>
</mwl-calendar-day-view>
</div>
</ion-content>
+6
View File
@@ -16,6 +16,9 @@
background-color: white !important;
}
.monthview-current{
background-color: red;
}
.monthview-selected {
background-color: lightskyblue !important;
}
@@ -264,3 +267,6 @@ label{
color: #000 !important;
}
.segment {
}
+27 -1
View File
@@ -8,6 +8,9 @@ import { Event } from '../../models/event.model';
import { Router, NavigationEnd } from '@angular/router';
import { AlertService } from 'src/app/services/alert.service';
import { CalendarEvent, CalendarView } from 'angular-calendar';
import { setHours, setMinutes } from 'date-fns';
@Component({
selector: 'app-agenda',
templateUrl: './agenda.page.html',
@@ -15,6 +18,29 @@ import { AlertService } from 'src/app/services/alert.service';
})
export class AgendaPage implements OnInit {
view: CalendarView = CalendarView.Day;
viewDate: Date = new Date();
events: CalendarEvent[] = [
{
title: 'No event end date',
start: setHours(setMinutes(new Date(), 0), 3),
color: {
primary: 'red',
secondary: 'rellow'
},
},
{
title: 'No event end date',
start: setHours(setMinutes(new Date(), 0), 5),
color: {
primary: 'red',
secondary: 'rellow'
},
},
];
/* List of events of our calendar */
eventSource = [];
/* The title of the calendar */
@@ -213,7 +239,7 @@ export class AgendaPage implements OnInit {
}
else{
this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(response => {
this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");;
this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
this.eventsListPessoal.forEach(element => {
this.eventSource.push({
title: element.Subject,

Before

Width:  |  Height:  |  Size: 480 B

After

Width:  |  Height:  |  Size: 480 B

Before

Width:  |  Height:  |  Size: 433 B

After

Width:  |  Height:  |  Size: 433 B

Before

Width:  |  Height:  |  Size: 443 B

After

Width:  |  Height:  |  Size: 443 B

+12 -3
View File
@@ -29,7 +29,7 @@
td.monthview-current{
color: white;
/* border-radius: 89px; */
background: white !important;
background: red !important;
justify-content: center;
align-items: center;
/* display: flex; */
@@ -46,6 +46,15 @@ td.monthview-current{
}
}
.monthview-selected {
.monthview-secondary-with-event, .monthview-secondary-with-event[_ngcontent-dwf-c153] {
background-color: white !important;
}
td.monthview-selected {
background-color: #42b9fe30 !important;
color: black !important;
}
/* angular-cli file: src/styles.css */
@import "../node_modules/angular-calendar/css/angular-calendar.css";