跳过主要内容
返回插件
@capgo/capacitor-calendar
教程
@capgo/capacitor-calendar

日历

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

演示

动画WebP演示

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

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

{"targetLanguage":"Simplified Chinese","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Guide","","Test on device","","Download the __CAPGO_KEEP_0__ app, then scan the QR __CAPGO_KEEP_1__.","Download __CAPGO_KEEP_0__ on App Store","App Store","Download __CAPGO_KEEP_0__ on Google Play","Google Play","","Calendar plugin preview QR link","Calendar plugin preview QR __CAPGO_KEEP_0__","使用 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-calendar","The"]}

{"targetLanguage":"Simplified Chinese","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["指南","","在设备上测试","","下载 __CAPGO_KEEP_0__ 应用程序,然后扫描 QR __CAPGO_KEEP_1__。",

下载 __CAPGO_KEEP_0__ 在 App Store

Download the Capgo app, then scan the QR code.

Calendar plugin preview QR code

{"targetLanguage":"Simplified Chinese","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["指南","","在设备上测试","","下载 capgo 应用程序,然后扫描二维码 capacitor。",

下载 __CAPGO_KEEP_0__ 在 App Store","App Store","下载 __CAPGO_KEEP_0__ 在 Google Play","Google Play","日历插件预览二维码链接","日历插件预览二维码 __CAPGO_KEEP_0__","使用 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-calendar","The"]} @capgo/capacitor-calendar package lets a Capacitor app manage native calendar events on iOS and Android. It can request calendar permissions, create and edit events, open native calendar UI, list calendars and events, and manage Reminders on 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 上可用

全局参考