メインコンテンツにジャンプ
プラグインに戻る
@capgo/capacitor-カレンダー
チュートリアル
@capgo/capacitor-カレンダー

カレンダー

iOSとAndroidでネイティブのカレンダーイベントを管理し、iOSのリマインダー機能もサポート

デモ

WebPアニメーション

iOSとAndroidでネイティブのカレンダーイベント作成

ソースアセット
iOSのカレンダーイベント作成
iOSイベント作成
Androidのカレンダーイベント作成
Androidイベント作成

ガイド

カレンダーに関するチュートリアル

デバイスでテスト

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

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

Capacitorの@capgo/capacitor-calendarを使用

The @capgo/capacitor-calendar Capacitor のパッケージは、Capacitor アプリが iOS と Android のネイティブ カレンダー イベントを管理できるようにします。 また、カレンダー パーミッションを要求し、イベントを作成、編集し、ネイティブ カレンダー UI を開き、カレンダーとイベントをリストし、iOS の Reminders を管理することもできます。

インストール

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 の Reminders

const permission = await CapacitorCalendar.requestFullRemindersAccess();

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

Reminders は iOS でのみ利用可能です。

フル リファレンス