Allez directement au contenu principal
Retour aux plugins
@capgo/capacitor-calendar
Tutoriel
@capgo/capacitor-calendar

Calendrier

Gérer les événements de calendrier natifs sur iOS et Android, avec prise en charge des rappels iOS

Démo

Démonstrations WebP animées

Création d'événements de calendrier natifs sur iOS et Android, exportés sous forme de démonstrations WebP animées.

Atouts de source
Démo iOS de création d'événements de calendrier natifs
Création d'événements iOS
Démo Android de création d'événements de calendrier natifs
Création d'événements Android

Guide

Tutoriel sur le calendrier

Test sur appareil

Téléchargez l'application Capgo, puis scannez le code QR code.

Lien QR de prévisualisation du plugin de calendrier code

En utilisant @capgo/capacitor-calendrier

Le @capgo/capacitor-calendar package permet à une application Capacitor de gérer les événements du calendrier natif sur iOS et Android. Elle peut demander les permissions du calendrier, créer et modifier des événements, ouvrir l'interface utilisateur du calendrier natif, lister les calendriers et les événements, et gérer les rappels sur iOS.

Installer

npm install @capgo/capacitor-calendar
npx cap sync

Configurer les permissions natives

Sur iOS, ajoutez les descriptions d'utilisation dont votre application a besoin. 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>

Sur Android, ajoutez les permissions du calendrier dont votre application a besoin. android/app/src/main/AndroidManifest.xml:

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

Demander la permission

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

const permission = await CapacitorCalendar.requestFullCalendarAccess();

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

Créer un événement

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

Ouvrir l'interface utilisateur de l'événement natif

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

Lister les événements

const now = Date.now();

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

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

Les rappels sont uniquement disponibles sur iOS.

Référence complète