forked from EVOgeek/Vmeda.Online
67 lines
3.8 KiB
HTML
67 lines
3.8 KiB
HTML
|
|
<!-- Add buttons to the nav bar. -->
|
|
<core-navbar-buttons end>
|
|
<button [hidden]="!canNavigate || isCurrentMonth || !displayNavButtons" ion-button icon-only clear (click)="goToCurrentMonth()">
|
|
<core-icon name="fa-calendar-times-o"></core-icon>
|
|
</button>
|
|
</core-navbar-buttons>
|
|
|
|
<core-loading [hideUntil]="loaded" class="core-loading-center">
|
|
<!-- Period name and arrows to navigate. -->
|
|
<ion-grid padding-top>
|
|
<ion-row>
|
|
<ion-col text-start *ngIf="canNavigate">
|
|
<a ion-button icon-only clear (click)="loadPrevious()" [title]="'core.previous' | translate">
|
|
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
|
|
</a>
|
|
</ion-col>
|
|
<ion-col text-center class="addon-calendar-period">
|
|
<h3>{{ periodName }}</h3>
|
|
</ion-col>
|
|
<ion-col text-end *ngIf="canNavigate">
|
|
<a ion-button icon-only clear (click)="loadNext()" [title]="'core.next' | translate">
|
|
<ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
|
|
</a>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
<!-- Calendar view. -->
|
|
<ion-grid class="addon-calendar-months">
|
|
<!-- List of days. -->
|
|
<ion-row>
|
|
<ion-col text-center *ngFor="let day of weekDays" class="addon-calendar-weekday">
|
|
<p>{{ day.shortname | translate }}</p>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<!-- Weeks. -->
|
|
<ion-row *ngFor="let week of weeks" class="addon-calendar-week">
|
|
<ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day"></ion-col> <!-- Empty slots (first week). -->
|
|
<ion-col text-center *ngFor="let day of week.days" (click)="dayClicked(day.mday)" [ngClass]='{"hasevents": day.hasevents, "today": day.istoday, "weekend": day.isweekend, "duration_finish": day.haslastdayofevent}' class="addon-calendar-day">
|
|
<p class="addon-calendar-day-number">{{ day.mday }}</p>
|
|
|
|
<!-- In phone, display some dots to indicate the type of events. -->
|
|
<p class="hidden-tablet addon-calendar-dot-types"><span *ngFor="let type of day.calendareventtypes" class="calendar_event_type calendar_event_{{type}}"></span></p>
|
|
|
|
<!-- In tablet, display list of events. -->
|
|
<div class="hidden-phone addon-calendar-day-events">
|
|
<ng-container *ngFor="let event of day.filteredEvents | slice:0:4; let index = index">
|
|
<p *ngIf="index < 3 || day.filteredEvents.length == 4" class="addon-calendar-event" (click)="eventClicked(event, $event)">
|
|
<span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
|
|
<ion-icon *ngIf="event.offline && !event.deleted" name="time"></ion-icon>
|
|
<ion-icon *ngIf="event.deleted" name="trash"></ion-icon>
|
|
<img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" alt="" role="presentation" class="core-module-icon">
|
|
<span class="addon-calendar-event-time">{{ event.timestart * 1000 | coreFormatDate: timeFormat }}</span>
|
|
<span class="addon-calendar-event-name">{{event.name}}</span>
|
|
</p>
|
|
</ng-container>
|
|
<p *ngIf="day.filteredEvents.length > 4" class="addon-calendar-day-more"><b>{{ 'core.nummore' | translate:{$a: day.filteredEvents.length - 3} }}</b></p>
|
|
</div>
|
|
</ion-col>
|
|
<ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day"></ion-col> <!-- Empty slots (last week). -->
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
</core-loading>
|