How to embed a calendar in Ionic 4

manpreet Best Answer 2 years ago

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 its supposed to look: https://imgur.com/a/MfZXy0q

manpreet 2 years ago

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

 
    mode" [currentDate]="calendar.currentDate"
        (onCurrentDateChanged)="onCurrentDateChanged($event)" 
        (onEventSelected)="onEventSelected($event)" 
        (onTitleChanged)="onViewTitleChanged($event)"
        (onTimeSelected)="onTimeSelected($event)" step="30">
      
    

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