Mulai

Instal

Anda dapat menggunakan Pengaturan AI-Assisted 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:

npm install @capgo/capacitor-calendar
npx cap sync

Pengaturan 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>

Pengaturan iOS 17 dan yang lebih baru membedakan antara akses tulisan dan akses kalender penuh. Hanya termasuk deskripsi pengingat jika aplikasi Anda memanggil API Reminders.

Referensi Apple: Migrasi ke Level Akses Kalender Terbaru.

Pengaturan Android

Tambahkan izin kalender yang dibutuhkan 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: Kebijakan 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().

Membuat Acara Baru

Tanggal-tanggal adalah timestamp 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 akan mengembalikan null. Daftar acara setelahnya jika Anda perlu menemukan ID acara yang dibuat.

Daftar Acara Mendatang

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

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

Pilih Kalender

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

Repository ini 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 README paket dan definisi TypeScript:

• README
• Definisi Tipe