跳过主要内容
@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

日历插件预览二维码 code

使用 @capgo/capacitor-calendar

该 @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 应用中安装日历插件?

运行 &quot;bun add @capgo/capacitor-calendar&quot; (或 &quot;npm install @capgo/capacitor-calendar&quot;),然后运行 &quot;bunx cap sync&quot; 以便 iOS 和 Android 项目捕获本地 code。从 &quot;@capgo/capacitor-calendar&quot; 中导入它到您的应用 code。

@capgo/capacitor-calendar 与 React、Vue 和 Angular 是否兼容?

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

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

Capgo 插件遵循 Capacitor 的主要版本:使用与 Capacitor 主要版本匹配的插件版本(例如插件 v8 与 Capacitor 8)。兼容性表格在 GitHub README 中列出维护的版本。

capgo/capacitor-calendar 是否免费和开源?

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

code 使用 Calendar 是否可以在 App Store 中更新?

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

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

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

开始使用Capgo