跳过主要内容
@capgo/capacitor日历 设备API 开源

日历 Capacitor插件

在iOS和Android上管理本机日历事件,支持iOS提醒

安装

bun add @capgo/capacitor-calendar bunx cap sync
npm、pnpm或yarn
  • npm install @capgo/capacitor-calendar
  • pnpm add @capgo/capacitor-calendar
  • yarn add @capgo/capacitor-calendar

演示

日历演示

原生 iOS 和 Android 日历事件创建,导出为动画 WebP 演示。

源资产
iOS 原生日历事件创建演示
iOS 事件创建
Android原生日历事件创建的示例
Android事件创建

指南

如何在Capacitor中使用日历

在设备上测试

下载Capgo应用,然后扫描QRcode

日历插件预览QRcode

使用@capgo/capacitor日历

The @capgo/capacitor-calendar Capacitor应用可以使用该包管理iOS和Android的本机日历事件。它可以请求日历权限、创建和编辑事件、打开本机日历UI、列出日历和事件以及管理iOS上的提醒。

安装

npm install @capgo/capacitor-calendar
npx cap sync

配置本机权限

在iOS上,添加您的应用程序需要的使用说明 ios/App/App/Info.plist:

<key>NSCalendarsUsageDescription</key>
<string>This app needs calendar access.</string>
<key>NSCalendarsWriteOnlyAccessUsageDescription</key>
<string>This app needs permission to add calendar events.</string>
<key>NSCalendarsFullAccessUsageDescription</key>
<string>This app needs permission to read and manage calendar events.</string>
<key>NSRemindersFullAccessUsageDescription</key>
<string>This app needs permission to read and manage reminders.</string>

在Android上,添加您的应用程序需要的日历权限 android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_CALENDAR" />
<uses-permission android:name="android.permission.WRITE_CALENDAR" />

请求权限

import { CapacitorCalendar } from '@capgo/capacitor-calendar';

const permission = await CapacitorCalendar.requestFullCalendarAccess();

if (permission.result !== 'granted') {
  throw new Error('Calendar permission was not granted');
}

创建一个事件

const startDate = Date.now() + 60 * 60 * 1000;
const endDate = startDate + 60 * 60 * 1000;

const { id } = await CapacitorCalendar.createEvent({
  title: 'Product review',
  location: 'Capgo',
  startDate,
  endDate,
  description: 'Created with @capgo/capacitor-calendar',
});

console.log('Created event', id);

打开本机事件UI

await CapacitorCalendar.createEventWithPrompt({
  title: 'Planning session',
  location: 'Office',
  startDate: Date.now() + 24 * 60 * 60 * 1000,
  endDate: Date.now() + 25 * 60 * 60 * 1000,
});

列出事件

const now = Date.now();

const { result: events } = await CapacitorCalendar.listEventsInRange({
  from: now,
  to: now + 7 * 24 * 60 * 60 * 1000,
});

iOS提醒

const permission = await CapacitorCalendar.requestFullRemindersAccess();

if (permission.result === 'granted') {
  await CapacitorCalendar.createReminder({
    title: 'Send launch notes',
    dueDate: Date.now() + 2 * 24 * 60 * 60 * 1000,
  });
}

iOS 上才可使用提醒功能。

全局参考

常见问题

日历插件常见问题

如何在Capacitor应用中安装日历插件?

运行"bun add @capgo/capacitor-calendar" (或"npm install @capgo/capacitor-calendar"),然后运行"bunx cap sync"以便iOS和Android项目获取本地code。在应用code中从"@capgo/capacitor-calendar"中导入。

是否@capgo/capacitor日历与React、Vue和Angular兼容?

是。日历是一个Capacitor包,因此它与任何在Capacitor中运行的网页框架兼容,包括Ionic、React、Vue、Angular、Svelte和普通JavaScript。

哪个Capacitor版本支持@capgo/capacitor-calendar?

Capgo插件遵循Capacitor的主要版本:使用与Capacitor主要版本匹配的插件主要版本(例如插件v8与Capacitor 8)。在GitHub README中列出的版本是支持的版本。

是否@capgo/capacitor-日历免费且开源?

是。源码code在GitHub上公开,https://github.com/Cap-go/capacitor-日历/,并且可以从npm免费安装。欢迎bug报告和pull请求。

是否可以在不经过App Store审核的情况下更新code使用的日历?

安装或升级插件会改变原生code,因此需要重新构建商店。之后,JavaScript、HTML和CSS调用插件的更改可以立即通过Capgo实时更新。

不必等待应用程序审查就可以将日历更改推送到商店

一旦插件在您的商店构建中,Capgo实时更新将将您的JavaScript、HTML和CSS更改推送给用户,仅需几分钟。

从Capgo开始