Categories

See More
Popular Forum

MBA (4887) B.Tech (1769) Engineering (1486) Class 12 (1030) Study Abroad (1004) Computer Science and Engineering (988) Business Management Studies (865) BBA (846) Diploma (746) CAT (651) B.Com (648) B.Sc (643) JEE Mains (618) Mechanical Engineering (574) Exam (525) India (462) Career (452) All Time Q&A (439) Mass Communication (427) BCA (417) Science (384) Computers & IT (Non-Engg) (383) Medicine & Health Sciences (381) Hotel Management (373) Civil Engineering (353) MCA (349) Tuteehub Top Questions (348) Distance (340) Colleges in India (334)
See More

How to embed a calendar in Ionic 4

General Tech Bugs & Fixes
Max. 2000 characters
Replies

usr_profile.png
Karlie Kloss

User

( 7 months 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

usr_profile.png
Deepak Parmar

User

( 7 months 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

 <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

what's your interest


forum_ban8_5d8c5fd7cf6f7.gif