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