**home.page.ts**
import { Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
import { NavController, IonModal, AlertController } from '@ionic/angular';
import { ModalController } from '@ionic/angular';
import { Account } from 'src/model/account.model';
import { AccountService } from '../../services/auth/account.service';
import { LoginService } from '../../services/login/login.service';
import { HttpClient} from '@angular/common/http';
import { HttpResponse, HttpHeaders } from '@angular/common/http';
import { filter, map } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { CalendarComponent } from 'ionic2-calendar';
import { formatDate } from '@angular/common';
import { ViewChild } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
account: Account;
type= 'task'
map_detail: any;
name: string;
eventSource = [];
viewTitle: string;
calendar = {
mode: 'month',
currentDate: new Date(),
};
selectedDate: Date;
@ViewChild(CalendarComponent) myCal: CalendarComponent;
constructor(public navController: NavController, private alertCtrl: AlertController, @Inject(LOCALE_ID) private locale: string,
private modalCtrl: ModalController,private accountService: AccountService, private loginService: LoginService,public httpClient: HttpClient) {}
async ngOnInit() {
this.accountService.identity().then(account => {
if (account === null) {
this.goBackToHomePage();
} else {
this.account = account;
}
});
}
next() {
this.myCal.slideNext();
}
back() {
this.myCal.slidePrev();
}
onViewTitleChanged(title) {
this.viewTitle = title;
}
async onEventSelected(event) {
let start = formatDate(event.startTime, 'medium', this.locale);
let end = formatDate(event.endTime, 'medium', this.locale);
const alert = await this.alertCtrl.create({
header: event.title,
subHeader: event.desc,
message: 'From: ' + start + '<br><br>To: ' + end,
buttons: ['OK'],
});
alert.present();
}
createRandomEvents() {
var events = [];
for (var i = 0; i < 50; i += 1) {
var date = new Date();
var eventType = Math.floor(Math.random() * 2);
var startDay = Math.floor(Math.random() * 90) - 45;
var endDay = Math.floor(Math.random() * 2) + startDay;
var startTime;
var endTime;
if (eventType === 0) {
startTime = new Date(
Date.UTC(
date.getUTCFullYear(),
date.getUTCMonth(),
date.getUTCDate() + startDay
)
);
if (endDay === startDay) {
endDay += 1;
}
endTime = new Date(
Date.UTC(
date.getUTCFullYear(),
date.getUTCMonth(),
date.getUTCDate() + endDay
)
);
events.push({
title: 'All Day - ' + i,
startTime: startTime,
endTime: endTime,
allDay: true,
});
} else {
var startMinute = Math.floor(Math.random() * 24 * 60);
var endMinute = Math.floor(Math.random() * 180) + startMinute;
startTime = new Date(
date.getFullYear(),
date.getMonth(),
date.getDate() + startDay,
0,
date.getMinutes() + startMinute
);
endTime = new Date(
date.getFullYear(),
date.getMonth(),
date.getDate() + endDay,
0,
date.getMinutes() + endMinute
);
events.push({
title: 'Event - ' + i,
startTime: startTime,
endTime: endTime,
allDay: false,
});
}
}
this.eventSource = events;
}
removeEvents() {
this.eventSource = [];
}
isAuthenticated() {
return this.accountService.isAuthenticated();
}
logout() {
this.loginService.logout();
this.goBackToHomePage();
}
private goBackToHomePage(): void {
this.navController.navigateBack('');
}
openperson(){
this.navController.navigateForward('profile')
}
}
**home.page.html**
<ion-header>
<ion-toolbar color="primary">
<ion-title>
Ionic Calendar
</ion-title>
<ion-buttons slot="end">
<ion-button (click)="openCalModal()">
<ion-icon name="add" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-segment [(ngModel)]="calendar.mode">
<ion-segment-button value="month">
<ion-label>Month</ion-label>
</ion-segment-button>
<ion-segment-button value="week">
<ion-label>Week</ion-label>
</ion-segment-button>
<ion-segment-button value="day">
<ion-label>Day</ion-label>
</ion-segment-button>
</ion-segment>
<ion-row>
<ion-col size="6">
<ion-button (click)="createRandomEvents()" expand="block" fill="outline">
Add random events
</ion-button>
</ion-col>
<ion-col size="6">
<ion-button (click)="removeEvents()" expand="block" fill="outline">
Remove all events
</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="2">
<ion-button fill="clear" (click)="back()">
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
<ion-col size="8" class="ion-text-center">
<h2>{{ viewTitle }}</h2>
</ion-col>
<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)"
startHour="6"
endHour="20"
step="30"
startingDayWeek="1"
>
</calendar>
</ion-content>
**home.module.ts**
import { CommonModule } from '@angular/common';
import { LOCALE_ID, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { UserRouteAccessService } from 'src/app/services/auth/user-route-access.service';
import { HomePage } from './home.page';
import { NgxEchartsModule } from 'ngx-echarts';
import { NgCalendarModule } from 'ionic2-calendar';
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
registerLocaleData(localeDe);
const routes: Routes = [
{
path: '',
component: HomePage,
data: {
authorities: ['ROLE_USER'],
},
canActivate: [UserRouteAccessService],
},
];
@NgModule({
imports: [ NgCalendarModule ,
IonicModule, CommonModule, FormsModule, TranslateModule, RouterModule.forChild(routes),
NgxEchartsModule.forRoot({
echarts: () => import('echarts'),
})],
declarations: [HomePage],
providers: [
{ provide: LOCALE_ID, useValue: 'de-DE' }
]
})
export class HomePageModule {}
````Preformatted text`
2 posts - 1 participant
Read full topic
