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

Calendario Plugin Capacitor

Gestisci gli eventi del calendario nativo su iOS e Android, con supporto per Reminders su 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

Demo del calendario

Creazione nativa di eventi sul calendario su iOS e Android, esportata come demo WebP animate.

Asset sorgente
Demo iOS della creazione nativa di eventi sul calendario
Creazione eventi su iOS
Demo Android: creazione eventi nativi
Creazione eventi su Android

Guida

Come usare Calendar in Capacitor

Testa sul dispositivo

Scarica l'app Capgo, poi scansiona il QR code.

Anteprima QR del plugin Calendar code

Utilizzo di @capgo/capacitor-calendar

Il @capgo/capacitor-calendar Il pacchetto permette a un'app Capacitor di gestire gli eventi del calendario nativo su iOS e Android. Può richiedere i permessi del calendario, creare e modificare eventi, aprire l'interfaccia nativa del calendario, elencare calendari ed eventi e gestire i Promemoria su iOS.

Installa

npm install @capgo/capacitor-calendar
npx cap sync

Configura i permessi nativi

Su iOS, aggiungi le descrizioni d'uso necessarie alla tua app in 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>

Su Android, aggiungi i permessi del calendario necessari alla tua app in android/app/src/main/AndroidManifest.xml:

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

Richiedi permesso

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

Apri l'interfaccia eventi nativa

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

Elenca eventi

const now = Date.now();

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

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

I promemoria sono disponibili solo su iOS.

Riferimento completo

FAQ

FAQ sul plugin Calendar

Come installo il plugin Calendar in un'app Capacitor?

Esegui "bun add @capgo/capacitor-calendar" (o "npm install @capgo/capacitor-calendar"), poi esegui "bunx cap sync" in modo che i progetti iOS e Android integrino le code native. Importalo da "@capgo/capacitor-calendar" nel tuo code.

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

Sì. Calendar è un pacchetto Capacitor, quindi funziona con qualsiasi web framework che giri all'interno di Capacitor, inclusi Ionic, React, Vue, Angular, Svelte e JavaScript puro.

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

I plugin Capgo seguono la major version di Capacitor: usa la major version del plugin che corrisponde alla tua major version di Capacitor (ad esempio plugin v8 con Capacitor 8). La tabella di compatibilità nel README di GitHub elenca le versioni mantenute.

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

Sì. Il codice sorgente di code è pubblico su GitHub all'indirizzo https://github.com/Cap-go/capacitor-calendar/ e il pacchetto si installa gratuitamente da npm. Bug report e pull request sono benvenuti.

Posso aggiornare code che usa Calendar senza passare dalla revisione dell'App Store?

Installare o aggiornare il plugin modifica il code nativo, quindi serve una nuova build per lo store. Dopo, le modifiche a JavaScript, HTML e CSS che chiamano il plugin possono essere rilasciate subito con le live updates di Capgo.

Distribuisci modifiche al calendario senza attendere la revisione dell'app

Una volta incluso il plugin nel tuo store build, Capgo invia le modifiche a JavaScript, HTML e CSS tramite live updates in pochi minuti.

Inizia con Capgo