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

Kalender

Atur acara kalender asli pada iOS dan Android, dengan dukungan pengingat iOS

Demo

Demos animasi WebP

Pembuatan acara kalender asli pada iOS dan Android, diekspor sebagai demos animasi WebP.

Sumber aset
Demo iOS native kalender event pembuatan
Pembuatan event iOS
Demo Android native kalender event pembuatan
Pembuatan event Android

Petunjuk

Tutorial Kalender

Uji coba pada perangkat

Unduh aplikasi Capgo, kemudian scan kode QR code.

Pratinjau tautan QR plugin kalender code

Menggunakan @capgo/capacitor-kalender

Kalender @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 antarmuka kalender native, menampilkan kalender dan acara, serta mengelola Pengingat di iOS.

Pasang

npm install @capgo/capacitor-calendar
npx cap sync

Konfigurasi Izin Native

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

Di Android, tambahkan izin kalender aplikasi yang dibutuhkan 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 Antarmuka Acara Native

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

Daftar Acara

const now = Date.now();

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

iOS Pengingat

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