在本教程中，我们将看到如何在Ionic 5中将Native Calendar与Cordova一起使用。我们创建一个简单的Ionic 5应用示例，演示如何打开或创建本机日历，获得对日历的读写权限，以及如何向日历添加事件。

创建一个新的Ionic 5/ Angular项目

开始使用Ionic cli5生成一个新的Ionic 5应用程序。

打开终端或命令提示符，并运行以下命令：

ionic start IonicNativeCalendarExample 

接下来，使用以下命令在项目的文件夹内导航：

cd IonicNativeCalendarExample 

安装Cordova和Ionic Native 5 Calendar插件

ionic plugin add --save cordova-plugin-calendar
npm install --save @ionic-native/calendar

接下来，我们需要将日历提供程序添加到主模块提供程序数组，打开src/app/app.module.ts文件，并添加以下代码：

import { Calendar } from '@ionic-native/calendar';

@NgModule({
declarations: [
 MyApp,
 HomePage 
],
imports: [
 BrowserModule,
 IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
 MyApp,
 HomePage
],
providers: [
 StatusBar,
 SplashScreen,
 Calendar,
 {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {} 

在Ionic 5中注入和使用Calendar Service

现在我们准备注入，并使用本地日历API。

打开src/pages/home/home.ts文件，并按如下方式更新它：

import { Calendar } from '@ionic-native/calendar';

@Component({
selector: 'home',
templateUrl: 'home.html',
})
export class HomePage {

constructor(private calendar: Calendar) {
}

openCalendar(){
 this.calendar.openCalendar(new Date()).then(
 (msg) => { console.log(msg); },
 (err) => { console.log(err); }
 );
}

}

我们通过组件构造函数注入了Calendar服务，并使用实例打开当前日期的日历。

打开src/pages/home/home.html文件，并添加一个按钮以打开本机日历，如下所示：

<button ion-button (click)="openCalendar()">Open Calendar on Current Date</button>

这是一个打开日历的简单例子，

下面是一个请求读/写权限的示例，

addEvent(){
 return this.calendar.createEventInteractively("event title");
}
scheduleEvents(){
 this.calendar.hasReadWritePermission().then((result)=>{
 if(result === false){
 this.calendar.requestReadWritePermission().then((v)=>{
 this.addEvent();
 },(r)=>{
 console.log("Rejected");
 })
 }
 else
 {
 this.addEvent();
 }
 

})