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

カレンダー

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

デモ

アニメーションWebPデモ

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

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

ガイド

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

デバイスでテスト

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

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

capgo/@capgo/capacitor-calendarを使用

カレンダー @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のみで利用可能です。

フルリファレンス