Zum Hauptinhalt springen
@capgo/capacitor-calendar Device-APIs Open Source

Kalender Capacitor Plugin

Verwalte native Kalenderereignisse auf iOS und Android, inklusive iOS Reminders Support

Installieren

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

Demo

Kalender-Demos

Native Erstellung von Kalenderereignissen auf iOS und Android, exportiert als animierte WebP-Demos.

Quell-Assets
iOS-Demo: Native Kalenderereignisse erstellen
iOS-Event-Erstellung
Android-Demo: Native Kalenderereignisse erstellen
Android-Event-Erstellung

Anleitung

Calendar in Capacitor nutzen

Auf dem Gerät testen

Lade die Capgo App herunter und scanne den QR code.

QR-Code für die Kalender-Plugin-Vorschau code

@capgo/capacitor-calendar verwenden

Der @capgo/capacitor-calendar Dieses Package ermöglicht es einer Capacitor App, native Kalenderereignisse auf iOS und Android zu verwalten. Es kann Kalenderberechtigungen anfordern, Events erstellen und bearbeiten, die native Kalender-UI öffnen, Kalender und Events auflisten und auf iOS Reminders verwalten.

Installieren

npm install @capgo/capacitor-calendar
npx cap sync

Native Berechtigungen konfigurieren

Füge auf iOS die benötigten Beschreibungen für die Nutzung hinzu zu 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>

Füge auf Android die benötigten Kalenderberechtigungen hinzu zu android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.READ_CALENDAR" />
<uses-permission android:name="android.permission.WRITE_CALENDAR" />

Berechtigung anfordern

import { CapacitorCalendar } from '@capgo/capacitor-calendar';

const permission = await CapacitorCalendar.requestFullCalendarAccess();

if (permission.result !== 'granted') {
  throw new Error('Calendar permission was not granted');
}

Event erstellen

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

Native Event UI öffnen

await CapacitorCalendar.createEventWithPrompt({
  title: 'Planning session',
  location: 'Office',
  startDate: Date.now() + 24 * 60 * 60 * 1000,
  endDate: Date.now() + 25 * 60 * 60 * 1000,
});

Events auflisten

const now = Date.now();

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

iOS Erinnerungen

const permission = await CapacitorCalendar.requestFullRemindersAccess();

if (permission.result === 'granted') {
  await CapacitorCalendar.createReminder({
    title: 'Send launch notes',
    dueDate: Date.now() + 2 * 24 * 60 * 60 * 1000,
  });
}

Erinnerungen sind nur auf iOS verfügbar.

Vollständige Referenz

FAQ

Calendar-Plugin FAQ

Wie installiere ich das Calendar-Plugin in einer Capacitor-App?

Führe &quot;bun add @capgo/capacitor-calendar&quot; (oder &quot;npm install @capgo/capacitor-calendar&quot;) aus und danach &quot;bunx cap sync&quot;, damit die iOS- und Android-Projekte das native code übernehmen. Importiere es in deiner App code aus &quot;@capgo/capacitor-calendar&quot;.

Funktioniert @capgo/capacitor-calendar mit React, Vue und Angular?

Ja. Calendar ist ein Capacitor-Package und funktioniert daher mit jedem Web-Framework, das in Capacitor läuft, einschließlich Ionic, React, Vue, Angular, Svelte und reinem JavaScript.

Welche Capacitor-Version unterstützt @capgo/capacitor-calendar?

Capgo Plugins folgen der Major-Version von Capacitor: Nutze die Plugin-Major-Version, die zu deiner Capacitor Major-Version passt (z. B. Plugin v8 bei Capacitor 8). Die Kompatibilitätstabelle im GitHub README listet die gepflegten Versionen auf.

Ist @capgo/capacitor-calendar kostenlos und Open Source?

Ja. Der code Source-Code ist öffentlich auf GitHub unter https://github.com/Cap-go/capacitor-calendar/ einsehbar und das Paket kann kostenlos über npm installiert werden. Bug-Reports und Pull Requests sind jederzeit willkommen.

Kann ich code mit Calendar-Nutzung ohne App Store Review aktualisieren?

Die Installation oder ein Upgrade des Plugins ändert den nativen code, weshalb ein neuer Store-Build nötig ist. Danach können JavaScript-, HTML- und CSS-Änderungen, die das Plugin aufrufen, sofort per Capgo Live Updates ausgeliefert werden.

Calendar-Änderungen veröffentlichen, ohne auf den App-Review zu warten

Sobald das Plugin in deinem Store-Build ist, bringt Capgo mit Live-Updates deine JavaScript-, HTML- und CSS-Änderungen in Minuten zu den Nutzern.

Starte mit Capgo