Sauter au contenu principal
@capgo/capacitor-calendrier APIs des appareils Open source

Calendrier plugin Capacitor

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

Installer

bun add @capgo/capacitor-calendar bunx cap sync
npm, pnpm ou yarn
  • npm install @capgo/capacitor-calendar
  • pnpm add @capgo/capacitor-calendar
  • yarn add @capgo/capacitor-calendar

Demo

Démonstrations de calendrier

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

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

Guide

Comment utiliser le calendrier dans Capacitor

Tester sur appareil

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

Prévisualisation du plugin de calendrier QR code

En utilisant @capgo/capacitor-calendar

Le @capgo/capacitor-calendar Le package permet à une application Capacitor de gérer les événements du calendrier natif sur iOS et Android. Il 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

On iOS, add the usage descriptions your app needs to 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 de 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,
});

List Events

const now = Date.now();

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

Rappels sur 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 ne sont disponibles que sur iOS.

Référence complète

FAQ

FAQ du calendrier

Comment installer le plugin Calendrier dans une application Capacitor?

Exécutez « bun add @capgo/capacitor-calendar » (ou « npm install @capgo/capacitor-calendar »), puis exécutez « bunx cap sync » afin que les projets iOS et Android prennent en compte le projet natif code. Importez-l’à partir de « @capgo/capacitor-calendar » dans votre application code.

Le plugin @capgo/capacitor-calendar fonctionne-t-il avec React, Vue et Angular?

Oui. Le calendrier est un paquet Capacitor, il fonctionne donc avec tout framework web qui s'exécute à l'intérieur de Capacitor, y compris Ionic, React, Vue, Angular, Svelte et JavaScript simple.

Quelle version de Capacitor est prise en charge par @capgo/capacitor-calendar?

Les plugins Capgo suivent la version majeure de Capacitor : utilisez la version majeure du plugin qui correspond à la version majeure de votre Capacitor (par exemple, plugin v8 avec Capacitor 8). La table de compatibilité dans le fichier README du GitHub liste les versions maintenues.

Est-ce que @capgo/capacitor-calendar est gratuit et open source ?

Oui. La source code est publique sur GitHub à https://github.com/Cap-go/capacitor-calendar/ et le package est gratuit pour l'installation depuis npm. Les rapports de bogues et les demandes de tirage sont les bienvenus.

Puis-je mettre à jour code qui utilise le calendrier sans passer par une revue de l'App Store ?

Installation ou mise à jour du plugin modifie la bibliothèque native code, elle nécessite donc une nouvelle build de l'application. Une fois cela fait, les modifications JavaScript, HTML et CSS qui appellent le plugin peuvent être déployées instantanément avec des mises à jour Capgo.

Ship Calendar changes without waiting for app review

Une fois le plugin dans votre magasin de build, Capgo les mises à jour en temps réel déclenchent vos modifications JavaScript, HTML et CSS chez les utilisateurs en quelques minutes.

Démarrez avec Capgo