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

Calendrier

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

Demo

Démonstration

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

Ressources source
Démonstration iOS de création d'événements de calendrier natifs
Création d'événements iOS
Démonstration Android de création d'événements de calendrier natifs
Création d'événements Android

Guide

Guide de tutoriel sur le Calendrier

Test sur appareil

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

Calendrier plugin preview QR code

En utilisant @capgo/capacitor-calendar

Le @capgo/capacitor-calendar Le package permet à une application Capacitor de gérer les événements de calendrier natifs sur iOS et Android. Il peut demander les permissions de calendrier, créer et modifier des événements, ouvrir l'interface utilisateur de 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 autorisations de 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" />

Demandez une autorisation

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

Ouvrez l'interface utilisateur native de l'événement

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