Mulai

Instalasi

Anda dapat menggunakan Pengaturan Setup Bantu AI kami untuk menginstal plugin. Tambahkan Capgo kemampuan ke alat AI Anda menggunakan perintah berikut:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Lalu gunakan prompt berikut:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-calendar` plugin in my project.

Jika Anda lebih suka Setup Manual, instal plugin dengan menjalankan perintah-perintah berikut dan ikuti instruksi spesifik platform di bawah ini:

npm install @capgo/capacitor-calendar
npx cap sync

Setup iOS

Tambahkan deskripsi penggunaan aplikasi yang Anda butuhkan untuk 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>NSRemindersUsageDescription</key>
<string>This app needs reminders access.</string>
<key>NSRemindersFullAccessUsageDescription</key>
<string>This app needs permission to read and manage reminders.</string>

iOS 17 dan lebih baru membedakan antara akses tulisan-saja dan akses kalender penuh. Hanya termasuk deskripsi pengingat jika aplikasi Anda memanggil API Pengingat.

Referensi Apple: Migrasi ke tingkat akses Kalender terbaru.

Pengaturan Android

Tambahkan izin kalender yang diperlukan oleh aplikasi Anda android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_CALENDAR" />
<uses-permission android:name="android.permission.WRITE_CALENDAR" />

Referensi Android: Izin pengguna Kalender Provider.

Minta Akses Kalender

import { CapacitorCalendar } from '@capgo/capacitor-calendar';

const permission = await CapacitorCalendar.requestFullCalendarAccess();

if (permission.result !== 'granted') {
  throw new Error('Calendar permission was not granted');
}

Untuk aplikasi yang hanya menambahkan acara, gunakan requestWriteOnlyCalendarAccess() Untuk aliran baca Android-only, gunakan requestReadOnlyCalendarAccess().

Buat Acara

Tanggal dalam format Unix dalam milisecond.

import { CapacitorCalendar } from '@capgo/capacitor-calendar';

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);

Buka Editor Acara Nativ

await CapacitorCalendar.createEventWithPrompt({
  title: 'Planning session',
  location: 'Office',
  startDate: Date.now() + 24 * 60 * 60 * 1000,
  endDate: Date.now() + 25 * 60 * 60 * 1000,
});

Pada Android, panggilan pembuatan dan modifikasi berbasis prompt kembali nullDaftar acara setelahnya jika Anda perlu mencari ID acara yang dibuat.

Daftar Acara Masa Depan

const now = Date.now();
const oneWeekFromNow = now + 7 * 24 * 60 * 60 * 1000;

const { result: events } = await CapacitorCalendar.listEventsInRange({
  from: now,
  to: oneWeekFromNow,
});

Pilih Kalender A

const { result: calendars } = await CapacitorCalendar.listCalendars();
const { result: defaultCalendar } = await CapacitorCalendar.getDefaultCalendar();

const calendarId = defaultCalendar?.id ?? calendars[0]?.id;

selectCalendarsWithPrompt() Tersedia di iOS ketika Anda ingin menampilkan picker kalender sistem.

Buat Ingatan 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,
    notes: 'Created with @capgo/capacitor-calendar',
  });
}

API Ingatan hanya tersedia di iOS.

Aplikasi Contoh

Repositori termasuk aplikasi contoh dengan Capacitor pengaturan izin, pembuatan acara, prompt acara native, daftar kalender, dan daftar rentang acara.

iOS	Android

Referensi API

Referensi API yang lengkap dipelihara di dalam README paket dan definisi TypeScript:

• README
• Definisi Tipe