跳转至正文
@capgo/capacitor-calendar 设备 API 开源

日历 Capacitor 插件

在 iOS 和 Android 上管理原生日历事件,并支持 iOS Reminders

安装

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 中使用 Calendar

在设备上测试

下载 Capgo App,然后扫描二维码 code。

日历插件预览 QR code

使用 @capgo/capacitor-calendar

本指南中介绍的 @capgo/capacitor-calendar Capacitor 插件让 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。

完整参考

常见问题

Calendar 插件常见问题

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

运行 "bun add @capgo/capacitor-calendar"(或 "npm install @capgo/capacitor-calendar"),然后运行 "bunx cap sync",让 iOS 和 Android 项目引入原生 code。再在你的应用 code 中从 "@capgo/capacitor-calendar" 导入即可。

@capgo/capacitor-calendar 是否支持 React、Vue 和 Angular?

支持。Calendar 是一个 Capacitor 包,因此任何运行在 Capacitor 中的 Web 框架都能用,包括 Ionic、React、Vue、Angular、Svelte 和纯 JavaScript。

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

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-calendar 是免费开源的吗?

是的。code 的源码已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-calendar/,您也可以直接从 npm 免费安装。欢迎提交 Bug 报告和 Pull Request。

我可以使用 code 在无需经过 App Store 审核的情况下更新使用了 Calendar 的应用吗?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待 App 审核,即可发布 Calendar 变更

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo