Hello,
I’m trying to have the ionic2-calendar role based. My app uses firestore and all the events created for the calendar is stored in firestore. Im trying to have the events shown based on whos logged in. For instance, sam created events a,b,c and if he choose to view the calendar it only shows a,b,c and if john views the calendar, a,b,c wont show for him.
code for the .html file
<ion-title>
{{ viewTitle }}
</ion-title>
<ion-content padding [fullscreen]=“true”>
<form [formGroup]="createEventForm">
<ion-item>
<ion-label stacked>title</ion-label>
<ion-input
formControlName="title"
type="text"
>
</ion-input>
</ion-item>
<ion-item>
<ion-label stacked>start time</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm"
formControlName="startTime"
type="text"
></ion-datetime>
</ion-item>
<ion-item>
<ion-label stacked>end time</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm"
formControlName="endTime"
type="text"
></ion-datetime>
</ion-item>
<ion-button (click)="addNewEvent()">Add New Event</ion-button>
</form>
<ion-row>
<!-- Change the displayed calendar mode -->
<ion-col size="4">
<ion-button expand="block" [color]="calendar.mode == 'month' ? 'primary' : 'secondary'" (click)="changeMode('month')">Month</ion-button>
</ion-col>
<ion-col size="4">
<ion-button expand="block" [color]="calendar.mode == 'week' ? 'primary' : 'secondary'" (click)="changeMode('week')">Week</ion-button>
</ion-col>
<ion-col size="4">
<ion-button expand="block" [color]="calendar.mode == 'day' ? 'primary' : 'secondary'" (click)="changeMode('day')">Day</ion-button>
</ion-col>
<ion-col size="6" text-left>
<ion-button fill="clear" (click)="back()">
<ion-icon name="arrow-back" slot="icon-only"></ion-icon>
</ion-button>
</ion-col>
<ion-col size="6" text-right>
<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"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onRangeChanged)="reloadSource(startTime, endTime)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30">
code for the .ts file:
import { Component } from ‘@angular/core’;
import { AngularFirestore } from ‘@angular/fire/firestore’;
import { FormBuilder, FormGroup, Validators } from ‘@angular/forms’;
import { ActivatedRoute, Router } from ‘@angular/router’;
import { AlertController, LoadingController } from ‘@ionic/angular’;
import { AuthService } from ‘…/services/auth.service’;
import { Observable } from ‘rxjs’;
import { User } from ‘…/models/user’;
@Component({
selector: ‘app-viewcal’,
templateUrl: ‘viewcal.page.html’,
styleUrls: [‘viewcal.page.scss’],
})
export class ViewcalPage {
public userList: Observable<User[ ]>;
user: any;
public createEventForm: FormGroup;
eventSource = [ ];
viewTitle;
calendar = {
mode: 'month',
currentDate: new Date(),
};
selectedDate = new Date();
public event: Event;
constructor(
public loadingCtrl: LoadingController,
public alertCtrl: AlertController,
formBuilder: FormBuilder,
private router: Router,
private route: ActivatedRoute,
private db: AngularFirestore,
private auth: AuthService
) {
this.createEventForm = formBuilder.group({
title: ['', Validators.required],
startTime: ['', Validators.required],
endTime: ['', Validators.required]
});
this.auth.user$.subscribe(user =>{
this.user = user;
})
this.db.collection(`events`).snapshotChanges().subscribe(colSnap => {
this.eventSource = [];
colSnap.forEach(snap => {
let event:any = snap.payload.doc.data();
event.id = snap.payload.doc.id;
event.startTime = event.startTime.toDate();
event.endTime = event.endTime.toDate();
console.log(event);
this.eventSource.push(event);
});
});
}
ngOnInit() {
}
async addNewEvent() {
const startt = new Date(Date.parse(this.createEventForm.value.startTime));
const endt = new Date(Date.parse(this.createEventForm.value.endTime));
const start = startt;
const end = endt;
const title = this.createEventForm.value.title;
//end.setMinutes(end.getMinutes() + 60);
let event = {
title: title,
startTime: start,
endTime: end,
allDay: false,
Id: this.user.userId
};
this.db.collection(`events`).add(event);
}
onViewTitleChanged(title) {
console.log(title);
this.viewTitle=title;
}
onEventSelected(event) {
console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
}
onTimeSelected(ev) {
console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' +
(ev.events !== undefined && ev.events.length !== 0) + ', disabled: ' + ev.disabled);
this.selectedDate = ev.selectedTime;
}
onCurrentDateChanged(event: Date) {
console.log('current date change: ' + event);
}
onRangeChanged(ev) {
console.log('range changed: startTime: ' + ev.startTime + ', endTime: ' + ev.endTime);
}
next() {
var swiper = document.querySelector('.swiper-container')['swiper'];
swiper.slideNext();
}
back() {
var swiper = document.querySelector('.swiper-container')['swiper'];
swiper.slidePrev();
}
// Change between month/week/day
changeMode(mode) {
this.calendar.mode = mode;
}
}