Saltare al contenuto principale
Torna ai plugin
@capgo/capacitor-calendar
Tutorial
@capgo/capacitor-calendar

Icona del plugin calendario

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

Demo

Esempi animati WebP

Creazione di eventi del calendario nativi su iOS e Android, esportati come esempi animati WebP.

Assetti di origine
Esempio iOS di creazione di evento di calendario nativo
Creazione evento iOS
Esempio Android di creazione di evento di calendario nativo
Creazione evento Android

Guida

Tutorial sul Calendario

Test sul dispositivo

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

Calendario plugin anteprima QR code

Usando @capgo/capacitor-calendar

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

Installa

npm install @capgo/capacitor-calendar
npx cap sync

Configura Autorizzazioni Native

Su iOS, aggiungi le descrizioni di utilizzo che il tuo app necessita di 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 le autorizzazioni di calendario che il tuo app necessita di android/app/src/main/AndroidManifest.xml:

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

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

Apri L'Interfaccia Utente Di Evento Nativa

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

Elenco Eventi

const now = Date.now();

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

iOS Reminder

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 Reminder sono disponibili solo su iOS.

Riferimento Completo