メインコンテンツにスキップ
プラグインに戻る
@capgo/capacitor-calendar
チュートリアル
@capgo/capacitor-calendar

Calendar

Manage native calendar events on iOS and Android, with iOS Reminders support

Demo

Animated WebP demos

iOSおよびAndroidでネイティブのカレンダーイベントの作成、WebPアニメーションとしてエクスポート

ソースアセット
iOSのネイティブカレンダーイベントの作成のデモ
iOSのイベント作成
Androidのネイティブカレンダーイベントの作成のデモ
Androidのイベント作成

ガイド

カレンダーのチュートリアル

デバイスでテスト

アプリCapgoをダウンロードし、QRコードcodeをスキャンしてください。

カレンダープラグインのプレビューQR code

@capgo/capacitor-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のみで利用可能です。

フルリファレンス