Aller au contenu principal
@capgo/capacitor-calendar API de l'appareil Open source

Calendrier Plugin Capacitor

Gérez les événements du calendrier natif sur iOS et Android, avec le support 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

Démo

Démos du calendrier

Création d'événements de calendrier native sur iOS et Android, exportée en démos WebP animées.

Assets sources
Démo iOS de création d'événements dans le calendrier natif
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

Comment utiliser Calendar dans Capacitor

Tester sur l'appareil

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

QR de l'aperçu du plugin Calendar code

Utiliser @capgo/capacitor-calendar

Le @capgo/capacitor-calendar Le package Capacitor permet à une application Capacitor de gérer les événements du calendrier natif sur iOS et Android. Il peut demander les permissions de calendrier, créer et modifier des événements, ouvrir l'interface native du calendrier, 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 de calendrier nécessaires à votre application dans 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 d'événements native

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 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 plugin Calendar

Comment installer le plugin Calendar dans une application Capacitor ?

Exécutez "bun add @capgo/capacitor-calendar" (ou "npm install @capgo/capacitor-calendar"), puis lancez "bunx cap sync" pour que les projets iOS et Android prennent en compte le code natif. Importez-le depuis "@capgo/capacitor-calendar" dans votre application code.

Est-ce que @capgo/capacitor-calendar fonctionne avec React, Vue et Angular ?

Oui. Calendar est un package Capacitor, il fonctionne donc avec n'importe quel framework web qui tourne dans Capacitor, y compris Ionic, React, Vue, Angular, Svelte et le JavaScript pur.

Quelle version de Capacitor @capgo/capacitor-calendar prend-il en charge ?

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 le plugin v8 avec Capacitor 8). Le tableau de compatibilité du README de GitHub recense les versions maintenues.

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

Oui. Le code source de code est public sur GitHub à l'adresse https://github.com/Cap-go/capacitor-calendar/ et le package est gratuit à installer via npm. Les rapports de bugs et les pull requests sont les bienvenus.

Puis-je mettre à jour code utilisant Calendar sans passer par une revue de l'App Store ?

L'installation ou la mise à jour du plugin modifie le code natif, ce qui impose un nouveau build pour les stores. Ensuite, les changements JavaScript, HTML et CSS qui appellent le plugin peuvent être livrés instantanément via les live updates de Capgo.

Déployez les changements de Calendar sans attendre la validation de l'app

Une fois le plugin intégré à votre build de store, Capgo live updates déploie vos changements JavaScript, HTML et CSS aux utilisateurs en quelques minutes.

Commencez avec Capgo