Passer à la page d'accueil
@capgo/capacitor-calendrier APIs des appareils 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é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énement Android

Guide

Comment utiliser le calendrier dans Capacitor

Tester sur appareil

Téléchargez l'application Capgo, puis scannez le code 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 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

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

List Events

const now = Date.now();

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

iOS Reminders

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

FAQ

FAQ du plugin Calendrier

Comment installer le plugin Calendrier dans une application Capacitor ?

Exécutez la commande « 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 charge le code natif. Importez-l’à partir de « @capgo/capacitor-calendar » dans votre application code.

Fonctionne-t-il @capgo/capacitor-calendar avec React, Vue et Angular ?

Oui. Le calendrier est un package 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 pur.

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 README du GitHub liste les versions maintenues.

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

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

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

L'installation ou la mise à niveau du plugin change le code natif, il faut donc une nouvelle build de l'application. Après cela, les modifications JavaScript, HTML et CSS qui appellent le plugin peuvent être déployées instantanément avec les 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 poussent vos modifications de JavaScript, HTML et CSS chez les utilisateurs en quelques minutes.

Commencez avec Capgo