Cordova和Ionic Native 5 演示如何打开或创建本机日历

・3 分钟阅读

在本教程中,我们将看到如何在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();
 }
 
}) 

      
Lindafan816 profile image