Passer au contenu principal
Retour aux plugins
@capgo/capacitor-calendar
Tutoriel
par github.com/Cap-go

Calendrier

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

Démo

Démos WebP animés

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

Ateliers source
Démo iOS de création d'événements de calendrier natifs
Création d'événements iOS
Démonstration Android de création d'événement de calendrier natif
Création d'événement Android

Guide

Tutoriel sur le Calendrier

En utilisant @capgo/capacitor-calendrier

Le @capgo/capacitor-calendar Le package permet à une application Capacitor de gérer les événements de calendrier natif sur iOS et Android. Il peut demander les permissions de calendrier, créer et éditer 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 permissions 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" />

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 UI De L'Événement Nativ

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

Remarques 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