Langsung ke konten utama
@capgo/capacitor-calendar API Perangkat Open source

Kalender plugin Capacitor

Kelola event kalender native di iOS dan Android, lengkap dengan dukungan iOS Reminders

Instal

bun add @capgo/capacitor-calendar bunx cap sync
npm, pnpm atau yarn
  • npm install @capgo/capacitor-calendar
  • pnpm add @capgo/capacitor-calendar
  • yarn add @capgo/capacitor-calendar

Demo

Demo kalender

Pembuatan event kalender native di iOS dan Android, diekspor sebagai demo WebP animasi.

Aset sumber
Demo iOS pembuatan event kalender native
Pembuatan event iOS
Demo pembuatan event kalender native di Android
Pembuatan event Android

Panduan

Cara menggunakan Calendar di Capacitor

Tes di perangkat

Download aplikasi Capgo, lalu scan QR code.

QR pratinjau plugin Calendar code

Menggunakan @capgo/capacitor-calendar

Panduan @capgo/capacitor-calendar package ini memungkinkan aplikasi Capacitor mengelola event kalender native di iOS dan Android. Package ini bisa meminta izin kalender, membuat dan mengedit event, membuka UI kalender native, menampilkan daftar kalender dan event, serta mengelola Reminders di iOS.

Instal

npm install @capgo/capacitor-calendar
npx cap sync

Konfigurasi Izin Native

Di iOS, tambahkan deskripsi penggunaan yang dibutuhkan aplikasi Anda ke 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 yang dibutuhkan aplikasi Anda ke android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_CALENDAR" />
<uses-permission android:name="android.permission.WRITE_CALENDAR" />

Request Permission

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

const permission = await CapacitorCalendar.requestFullCalendarAccess();

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

Create An Event

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 Native Event

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

Daftar Event

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

Reminder hanya tersedia di iOS.

Referensi Lengkap

FAQ

FAQ plugin Calendar

Bagaimana cara install plugin Calendar di aplikasi Capacitor?

Jalankan &quot;bun add @capgo/capacitor-calendar&quot; (atau &quot;npm install @capgo/capacitor-calendar&quot;), lalu jalankan &quot;bunx cap sync&quot; agar proyek iOS dan Android memuat code native. Import dari &quot;@capgo/capacitor-calendar&quot; di code aplikasi Anda.

Apakah @capgo/capacitor-calendar bisa dipakai dengan React, Vue, dan Angular?

Ya. Calendar adalah package Capacitor, jadi bisa digunakan dengan framework web apa pun yang berjalan di dalam Capacitor, termasuk Ionic, React, Vue, Angular, Svelte, dan JavaScript murni.

Versi Capacitor mana yang didukung oleh @capgo/capacitor-calendar?

Plugin Capgo mengikuti versi mayor Capacitor: gunakan versi mayor plugin yang sesuai dengan versi mayor Capacitor Anda (contoh: plugin v8 dengan Capacitor 8). Tabel kompatibilitas di README GitHub mencantumkan versi yang masih di-maintain.

Apakah @capgo/capacitor-calendar gratis dan open source?

Ya. Source code tersedia publik di GitHub pada https://github.com/Cap-go/capacitor-calendar/ dan paketnya gratis diinstal dari npm. Laporan bug dan pull request sangat kami terima.

Bisakah saya memperbarui code yang menggunakan Calendar tanpa review App Store?

Instalasi atau upgrade plugin akan mengubah native code, jadi butuh build store baru. Setelah itu, perubahan JavaScript, HTML, dan CSS yang memanggil plugin bisa langsung dikirim lewat live updates Capgo.

Rilis perubahan Kalender tanpa menunggu review aplikasi

Setelah plugin ada di build store Anda, live updates Capgo akan mengirim perubahan JavaScript, HTML, dan CSS ke pengguna dalam hitungan menit.

Mulai dengan Capgo