メインコンテンツへスキップ
@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

デモ

Calendarのデモ

iOSとAndroidでのネイティブなカレンダーイベント作成。アニメーションWebP形式のデモとして書き出し。

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

ガイド

CapacitorでのCalendarの使い方

実機でテストする

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

Calendar plugin プレビュー 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プラグインのFAQ

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 パッケージなので、Ionic、React、Vue、Angular、Svelte、およびプレーンなJavaScriptを含む、Capacitor 内で動作するあらゆるWebフレームワークで使用可能です。

@capgo/capacitor-calendar はどの Capacitor バージョンをサポートしていますか?

Capgo プラグインは Capacitor のメジャーバージョンに合わせています。使用している Capacitor のメジャーバージョンに一致するプラグインのメジャーバージョンを使ってください (例: Capacitor 8 ならプラグイン v8)。GitHub の README にある互換性テーブルに、メンテナンス中のバージョンが記載されています。

@capgo/capacitor-calendarは無料かつオープンソースですか?

はい。codeのソースコードはGitHubの https://github.com/Cap-go/capacitor-calendar/ で公開されており、npm から無料でインストールできます。バグ報告やプルリクエストもお待ちしています。

App Storeの審査なしで、Calendarを使用しているcodeをアップデートできますか?

プラグインのインストールやアップグレードはネイティブの code を変更するため、新しいストアビルドが必要です。その後は、プラグインを呼び出す JavaScript、HTML、CSS の変更を Capgo Live Updates で即座に配信できます。

アプリの審査を待たずにCalendarの変更をリリース

プラグインをストア用ビルドに組み込めば、Capgo live updates で JavaScript、HTML、CSS の変更を数分でユーザーに配信できます

Capgo から始める