Lompat ke konten utama
@capgo/capacitor-kalender API Perangkat Terbuka Sumber

Kalender Plugin Capacitor

Manajemen Event Kalender Asli di iOS dan Android, dengan Support Pengingat iOS

Install

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 acara kalender native pada iOS dan Android, diekspor sebagai demo animasi WebP.

Sumber aset
Demo iOS pembuatan acara kalender native
Pembuatan acara iOS
Contoh demo Android untuk pembuatan acara kalender native
Pembuatan acara Android

Panduan

Bagaimana menggunakan Kalender di Capacitor

Uji coba di perangkat

Unduh aplikasi Capgo, kemudian scan kode QR code.

Tautan QR pratinjau plugin kalender code

Gunakan @capgo/capacitor-calendar

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

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" />

Izin Permintaan

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

Pengingat hanya tersedia di iOS.

Referensi Lengkap

FAQ

FAQ Kalender Plugin

Bagaimana cara menginstal plugin Kalender di sebuah aplikasi Capacitor?

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

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

Ya. Kalender adalah paket Capacitor, sehingga berfungsi dengan semua framework web yang berjalan di dalam Capacitor, termasuk Ionic, React, Vue, Angular, Svelte, dan JavaScript biasa.

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

Plugin Capgo mengikuti versi utama Capacitor: gunakan versi plugin utama yang sesuai dengan versi utama Capacitor (misalnya plugin v8 dengan Capacitor 8). Tabel kompatibilitas di README GitHub menampilkan versi yang dipertahankan.

Apakah @capgo/capacitor-calendar gratis dan sumber terbuka?

Ya. Sumber code tersedia di GitHub di https://github.com/Cap-go/capacitor-calendar/ dan paketnya dapat diinstal secara gratis dari npm. Laporan bug dan permintaan pull selalu welcome.

Apakah saya bisa memperbarui code yang menggunakan Calendar tanpa melalui ulasan App Store?

Pemasangan atau pembaruan plugin mengubah native code, sehingga memerlukan pembangunan toko baru. Setelah itu, perubahan JavaScript, HTML, dan CSS yang memanggil plugin dapat dikirimkan secara instan dengan Capgo live updates.

Kirim perubahan Kalender tanpa menunggu tinjauan aplikasi

Once the plugin is in your store build, Capgo live updates push your JavaScript, HTML and CSS changes to users in minutes.

Mulai dengan Capgo