Vai al contenuto principale
@capgo/capacitor-calendar API dei dispositivi Open source

Calendario Plugin Capacitor

Gestisci eventi di calendario nativi su iOS e Android, con supporto per le notifiche di iOS

Installa

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

Demo

Demos del calendario

Creazione di eventi di calendario nativi su iOS e Android, esportati come demo animate WebP.

Risorse di origine
Demo di creazione di eventi di calendario su iOS
Creazione evento iOS
Esempio Android di creazione di evento di calendario nativo
Creazione evento Android

Guida

Come utilizzare il Calendario in Capacitor

Testa sul dispositivo

Scarica l'app Capgo, poi scansa il codice QR code.

Collegamento QR di anteprima del plugin Calendario code

Utilizzando @capgo/capacitor-calendar

Il @capgo/capacitor-calendar package consente a un'app Capacitor di gestire gli eventi del calendario nativo su iOS e Android. Può richiedere le autorizzazioni del calendario, creare e modificare gli eventi, aprire l'interfaccia utente del calendario nativo, elencare i calendari e gli eventi e gestire le Reminder su iOS.

Installa

npm install @capgo/capacitor-calendar
npx cap sync

Configura le autorizzazioni native

Aggiungi le descrizioni di utilizzo che il tuo app necessita su iOS 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>

Aggiungi le autorizzazioni del calendario che il tuo app necessita su Android android/app/src/main/AndroidManifest.xml:

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

Richiedi l'autorizzazione

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

const permission = await CapacitorCalendar.requestFullCalendarAccess();

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

Crea un evento

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

Apre l'interfaccia utente degli eventi nativi

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

Elencare gli eventi

const now = Date.now();

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

Gestisci le Reminder su 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,
  });
}

Le avvisi sono disponibili solo su iOS.

Riferimento completo

FAQ

Domande frequenti sul plugin del calendario

Come posso installare il plugin del calendario in un'app Capacitor?

Esegui &quot;bun add @capgo/capacitor-calendar&quot; (o &quot;npm install @capgo/capacitor-calendar&quot;), quindi esegui &quot;bunx cap sync&quot; affinché i progetti iOS e Android rilevino il nativo code. Importalo da &quot;@capgo/capacitor-calendar&quot; nella tua app code.

Funziona @capgo/capacitor-calendar con React, Vue e Angular?

Sì. Il calendario è un pacchetto Capacitor, quindi funziona con qualsiasi framework web che esegue all'interno di Capacitor, compresi Ionic, React, Vue, Angular, Svelte e JavaScript puro.

Qual è la versione di Capacitor supportata da @capgo/capacitor-calendar?

Il plugin Capgo segue la versione maggiore di Capacitor: utilizza la versione del plugin maggiore che corrisponde alla tua versione maggiore di Capacitor (ad esempio plugin v8 con Capacitor 8). La tabella di compatibilità nel README del GitHub elenca le versioni mantenute.

È @capgo/capacitor-calendar gratuito e open source?

Sì. Il codice sorgente di code è pubblico su GitHub in https://github.com/Cap-go/capacitor-calendar/ e il pacchetto è gratuito per l'installazione da npm. I segnalazioni di bug e le richieste di pull sono benvenute.

Può aggiornare code che utilizza Calendar senza una revisione dell'App Store?

L'installazione o l'aggiornamento del plugin modifica il codice nativo di code, quindi richiede una nuova costruzione del negozio. Dopo di che, le modifiche JavaScript, HTML e CSS che chiamano il plugin possono essere spediti immediatamente con gli aggiornamenti live di Capgo.

Invia le modifiche al calendario senza aspettare la revisione dell'app

Una volta che il plugin è stato caricato nella tua store build, le Capgo aggiornamenti in tempo reale inviano le modifiche ai tuoi JavaScript, HTML e CSS agli utenti in pochi minuti.

Inizia con Capgo