__CAPGO_KEEP_0__ Startseite
@capgo/capacitor-calendar Geräte-APIs Offene Quelle

Kalender Capacitor-Plugin

Verwalten Sie native Kalenderereignisse auf iOS und Android, einschließlich iOS-Erinnerungssupport

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

Erstellung von Kalendereinträgen auf iOS und Android, exportiert als animierte WebP-Demos.

Quell-Assets
iOS-Demo der Erstellung von Kalendereinträgen
iOS-Ereignisse
Android-Demo für native Kalenderereignisse
Android-Ereignis-Erstellung

Anleitung

Wie man den Kalender in Capacitor verwendet

Testen auf Gerät

Herunterladen der Capgo-App, dann den QR-Code code scannen.

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

Mit @capgo/capacitor-Kalender

Die @capgo/capacitor-calendar package lets a Capacitor app manage native calendar events on iOS and Android. It can request calendar permissions, create and edit events, open native calendar UI, list calendars and events, and manage Reminders on iOS.

Installieren

npm install @capgo/capacitor-calendar
npx cap sync

Konfigurieren von Native Berechtigungen

Bei iOS fügen Sie den erforderlichen Benutzungsbeschreibungen Ihrer App hinzu 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>

Bei Android fügen Sie den erforderlichen Kalenderberechtigungen Ihrer App hinzu 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');
}

Ereignis 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 Ereignis-UI öffnen

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

Kalender-Plugin-Häufig gestellte Fragen

Wie installiere ich das Kalender-Plugin in einer Capacitor-Anwendung?

Führen Sie "bun add @capgo/capacitor-calendar" (oder "npm install @capgo/capacitor-calendar"), dann führen Sie "bunx cap sync" aus, damit die iOS- und Android-Projekte die native code-Datei aufnehmen. Importieren Sie sie aus "@capgo/capacitor-calendar" in Ihrer code-Anwendung.

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

Ja. Das Kalender-Plugin ist ein Capacitor-Paket, daher funktioniert es mit jedem Webframework, das innerhalb von Capacitor läuft, einschließlich Ionic, React, Vue, Angular, Svelte und plain JavaScript.

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

Die Capgo-Plugins folgen der Capacitor-Major-Version: verwenden Sie die Plugin-Major-Version, die Ihrem Capacitor-Major-Version entspricht (z.B. Plugin v8 mit Capacitor 8). Die Kompatibilitäts-Tabelle im GitHub-README enthält die unterstützten Versionen.

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

Ja. Die Quelle code ist öffentlich auf GitHub unter https://github.com/Cap-go/capacitor-Kalender/ und das Paket ist kostenlos zum Installieren von npm. Fehlerberichte und Pull-Anfragen sind willkommen.

Kann ich code aktualisieren, das den Kalender verwendet, ohne eine App-Store-Bewertung?

Die Installation oder das Upgrade des Plugins ändert die native code, daher benötigt es eine neue Store-Build. Anschließend können JavaScript-, HTML- und CSS-Änderungen, die den Plugin aufrufen, sofort mit Capgo Live-Updates verschickt werden.

Kalender-Änderungen ohne Wartezeit für die App-Überprüfung verschicken

Einmal das Plugin in Ihrem Store-Build integriert, Capgo Live-Updates drücken Ihre JavaScript-, HTML- und CSS-Änderungen in Minuten an die Benutzer.

Mit Capgo beginnen