Ionic framework 如何在爱奥尼亚4中嵌入日历？

我正在尝试制作一个用于上课的应用程序。所以，我需要显示一个日历，在日历中可以显示学生的出勤情况，无论他们在那一天出席还是缺席。是否有任何解决方法可以直接显示日历并在其上执行功能

它的外观截图：

---

您需要使用名为的插件，然后使用执行以下步骤

1） 将ionic2日历模块添加到app.module.ts

import { NgCalendarModule  } from 'ionic2-calendar';
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), 
    AppRoutingModule, NgCalendarModule],    
})
export class AppModule {}

2） 在page module.ts文件中声明它，如上所述

3） 然后添加.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） 然后根据您在page.ts文件中的要求使用事件

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);
  }

导出类主页{
公共事件源=[]；
public selectedDate=新日期（）；
isToday:布尔值=真；
markDisabled=（日期：date）=>{
var d=新日期（）；
//d.setDate（d.getDate（）-1）；
返回日期

---

这是我在ionic4项目中实现的工作示例。如果您不理解这个答案，请查看“无法在日历元素中绑定事件源”问题的视频教程是由于延迟加载问题。请尝试在各自的page.module.ts文件中导入日历模块。

它不断给出错误：1）无法绑定到“eventSource”，因为它不是“calendar”的已知属性。2）无法绑定到“calendarMode”，因为它不是“calendar”的已知属性。3）无法绑定到“currentDate”，因为它不是k“calendar”的nown属性。4）“calendar”不是已知元素。请帮助我解决此问题。提前感谢编辑了我的答案，因此请现在检查第4点，尽量不要复制粘贴它，因为我是按照我的要求做的，所以您是按照您的要求做的。这不适用于Ionic 5.2.4。有人可以帮助吗？

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);
  }