CODEWITHSUNDEEP
ionic-frameworkangular7ionic4
Akshat Kulshreshtha
Akshat Kulshreshtha

Reputation: 47

How to embed a calendar in Ionic 4?

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:

enter image description here

Upvotes: 1

Views: 4467

Answers (2)

fatema freezzy
fatema freezzy

Reputation: 11

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.

Upvotes: 1

Aniruddh Thakor
Aniruddh Thakor

Reputation: 1616

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

Upvotes: 1

Related Questions