mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 13:02:56 +00:00
Add calendar icons
This commit is contained in:
Peter Maquiran
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user