How to embed a calendar in Ionic 4? - ionic-framework

Question

I'm trying to make an app for class attendance. So, I need to show a calendar in which student's attendance can be shown whether they were present or absent on that specific day. Is there any workaround to directly show a calendar and perform functions on it.
Screenshot of how it's supposed to look:

Answer 1

you need to use plugin called ionic2-calender then use do this steps
1) add ionic2-calender module to app.module.ts
import { NgCalendarModule } from 'ionic2-calendar';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(),
AppRoutingModule, NgCalendarModule],
})
export class AppModule {}
2) declare it in the page module .ts file as well same as above.
3) then add .html
<ion-content>
<calendar [eventSource]="eventSource" [markDisabled]="markDisabled"
[calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)" step="30">
</calendar>
</ion-content>
4)then use event as per your requiremnt in page.ts file.
export class HomePage {
public eventSource = [];
public selectedDate = new Date();
isToday: boolean = true;
markDisabled = (date: Date) => {
var d = new Date();
// d.setDate(d.getDate() - 1);
return date < d;
};
calendar = {
mode: 'month',
currentDate: this.selectedDate
}
constructor(public navCtrl: NavController) {
}
changeMode(mode) {
this.calendar.mode = mode;
}
loadEvents() {
this.eventSource = this.createRandomEvents();
}
onCurrentDateChanged(ev) {
console.log(ev);
var today = new Date();
today.setHours(0, 0, 0, 0);
ev.setHours(0, 0, 0, 0);
this.isToday = today.getTime() === ev.getTime();
}
onViewTitleChanged(Title) {
this.viewTitle = Title;
}
onTimeSelected(event) {
console.log(event);
var date = new Date().getTime();
console.log(date);
var task = "work fast";
}
onEventSelected(event) {
console.log(event);
}
this is working example I have implimented in my ionic4 project.if you don't undestand this answer then please check videos tutorial of ionic2-calender

Answer 2

The problem of "can't bind event Source in calendar element" is due to problem of lazy loading. Please try importing calendar module in your respective page.module.ts file.