Guide
Tutorial tentang Kalender
Menggunakan @capgo/capacitor-kalender
The @capgo/capacitor-calendar mengizinkan paket Capacitor mengelola acara kalender native di iOS dan Android. Ia dapat meminta izin kalender, membuat dan mengedit acara, membuka UI kalender native, menampilkan kalender dan acara, serta mengelola Pengingat di iOS.
Pasang
npm install @capgo/capacitor-calendar
npx cap sync
Konfigurasi Izin Native
Pada iOS, tambahkan deskripsi penggunaan aplikasi yang dibutuhkan oleh 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 android/app/src/main/AndroidManifest.xml:
<uses-permission android:name="android.permission.READ_CALENDAR" />
<uses-permission android:name="android.permission.WRITE_CALENDAR" />
Minta Izin
import { CapacitorCalendar } from '@capgo/capacitor-calendar';
const permission = await CapacitorCalendar.requestFullCalendarAccess();
if (permission.result !== 'granted') {
throw new Error('Calendar permission was not granted');
}
Buat Acara
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 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,
});
Tampilkan 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,
});
}
Pengingat hanya tersedia di iOS.
Referensi Lengkap
- GitHub: https://github.com/Cap-go/capacitor-kalender/
- Dokumen: /docs/plugins/kalender/