mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
Add icons
This commit is contained in:
Generated
+90
-3
@@ -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
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -46,173 +46,198 @@
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-content>
|
||||
|
||||
<!-- Calendar is here -->
|
||||
<!-- Calendar is here -->
|
||||
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div [ngSwitch]="segment">
|
||||
<div *ngSwitchCase="'Combinada'">
|
||||
<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>
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div [ngSwitch]="segment">
|
||||
<div *ngSwitchCase="'Combinada'">
|
||||
<ion-row>
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-col size="2">
|
||||
<ion-button fill="clear" (click)="back()">
|
||||
<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 -->
|
||||
<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 slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></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>
|
||||
<!-- 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>
|
||||
</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>
|
||||
</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>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
<ion-fab vertical="bottom" horizontal="end" slot="fixed" (click)="openCalModal()">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add" ></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</ion-content>
|
||||
<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>
|
||||
</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>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
<ion-fab vertical="bottom" horizontal="end" slot="fixed" (click)="openCalModal()">
|
||||
<ion-fab-button>
|
||||
<ion-icon name="add" ></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
@@ -15,7 +15,10 @@
|
||||
.monthview-primary-with-event {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
|
||||
.monthview-current{
|
||||
background-color: red;
|
||||
}
|
||||
.monthview-selected {
|
||||
background-color: lightskyblue !important;
|
||||
}
|
||||
@@ -264,3 +267,6 @@ label{
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.segment {
|
||||
|
||||
}
|
||||
@@ -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
@@ -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";
|
||||
Reference in New Issue
Block a user