Lompat ke konten utama
Kembali ke plugin
@capgo/capacitor-kalender
Tutorial
@capgo/capacitor-kalender

Kalender

Kelola acara kalender native di iOS dan Android, dengan dukungan iOS Reminders

Demo

Demo WebP Animasi

Pembuatan Acara Kalender Asli di iOS dan Android, diekspor sebagai demo WebP animasi.

Sumber Aset
Demo iOS Pembuatan Acara Kalender Asli
Pembuatan Acara iOS
Contoh demo Android untuk pembuatan acara kalender native
Pembuatan acara Android

Panduan

Tutorial Kalender

Uji coba pada perangkat

Unduh aplikasi Capgo, kemudian scan kode QR code.

Tautan QR pratinjau plugin kalender code

Gunakan @capgo/capacitor-calendar

Kalangan @capgo/capacitor-calendar Paket ini memungkinkan aplikasi Capacitor mengelola acara kalender native di iOS dan Android. Paket ini dapat meminta izin kalender, membuat dan mengedit acara, membuka UI kalender native, menampilkan kalender dan acara, serta mengelola Pengingat di iOS.

Instal

npm install @capgo/capacitor-calendar
npx cap sync

Konfigurasi Izin Native

Pada iOS, tambahkan deskripsi penggunaan yang dibutuhkan oleh aplikasi Anda 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>

Pada Android, tambahkan izin kalender yang dibutuhkan 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" />

Meminta Izin

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

const permission = await CapacitorCalendar.requestFullCalendarAccess();

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

Membuat Acara Baru

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

Membuka UI Acara Native

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

Menampilkan Acara

const now = Date.now();

const { result: events } = await CapacitorCalendar.listEventsInRange({
  from: now,
  to: now + 7 * 24 * 60 * 60 * 1000,
});

Pengingat 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,
  });
}

Ingatan hanya tersedia di iOS.

Referensi Lengkap