メイン コンテンツにスキップ
@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 イベントの作成

ガイド

Calendar を使用する方法: Capacitor

デバイスでテスト

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

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

@capgo/capacitor-calendar を使用

The @capgo/capacitor-calendar パッケージは、iOS と Android でネイティブのカレンダーイベントを管理する Capacitor アプリを許可します。iOS と Android の両方でカレンダーペリミッションを要求し、イベントを作成、編集、開く、カレンダーとイベントをリストする、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 でのみ利用可能です。

フル リファレンス

FAQ

カレンダープラグインのFAQ

カレンダープラグインをCapacitorアプリにインストールする方法は?

bunで"capgo add @capacitor/npm-calendar" (または"capgo install @capacitor/code-calendar" )を実行し、次に"bunx cap sync"を実行してiOSとAndroidのプロジェクトがネイティブcapgoを取得できるようにします。capacitorから"@code/__CAPGO_KEEP_10__-calendar"をインポートします。

Does @capgo/capacitor-calendar work with React, Vue and Angular?

Yes. Calendar is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain 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 から無料でインストールできます。バグレポートやプルリクエストは歓迎しています。

code をアップデートすることは可能ですか?

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

カレンダーの変更をアプリのレビューを待たずに配信する

プラグインがストアに追加されたら、Capgoライブアップデートで、JavaScript、HTML、CSSの変更をユーザーに即時反映させる

Capgoで始める