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

Calendario

Gestisci gli eventi del calendario nativo su iOS e Android, con supporto per le Reminder di iOS

Demo

Demonstrazioni di WebP animate

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

Assetti di origine
Demo di iOS della creazione di eventi di calendario nativi
Creazione di eventi di iOS
Demo di Android della creazione di eventi di calendario nativi
Creazione di eventi di Android

Guida

Tutorial sul calendario

Testa sul dispositivo

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

Collegamento QR di anteprima del plugin calendario code

Utilizza @capgo/capacitor-calendario

Il @capgo/capacitor-calendar Il pacchetto consente a un'app Capacitor di gestire eventi del calendario nativi su iOS e Android. Può richiedere le autorizzazioni del calendario, creare e modificare eventi, aprire l'interfaccia utente del calendario nativo, elencare calendari ed 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 del 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 Evento Nativo

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

Le Reminder sono disponibili solo su iOS.

Riferimento Completo