Ke halaman utama
Logo Capgo
Kembali ke plugin
@capgo/capacitor-kalender
Tutorial
@capgo/capacitor-kalender

Kalender

Atur acara kalender asli di iOS dan Android, dengan dukungan Notifikasi iOS

Unduhan/bulan

4,5k

GitHub Bintang

1

Demo

Demo animasi WebP

Pembuatan acara kalender native pada iOS dan Android, diekspor sebagai demo animasi WebP.

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

Panduan

Tutorial Kalender

Menggunakan @capgo/capacitor-calendar

The @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.

Pasang

npm install @capgo/capacitor-calendar
npx cap sync

Konfigurasi Izin Native

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

Di Android, tambahkan izin kalender aplikasi 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,
  });
}

Reminders hanya tersedia di iOS.

Panduan Lengkap