Saltar al contenido

Getting Started

GitHub

Puede utilizar nuestra configuración asistida por IA para instalar el plugin. Agregue las Capgo habilidades a su herramienta de IA utilizando el siguiente comando:

Ventana de terminal
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Luego utilice el siguiente prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-calendar` plugin in my project.

If prefieres la configuración manual, instala el plugin ejecutando los siguientes comandos y sigue las instrucciones específicas de la plataforma a continuación:

Ventana de terminal
npm install @capgo/capacitor-calendar
npx cap sync

Agrega las descripciones de uso que tu aplicación necesita a 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>NSRemindersUsageDescription</key>
<string>This app needs reminders access.</string>
<key>NSRemindersFullAccessUsageDescription</key>
<string>This app needs permission to read and manage reminders.</string>

iOS 17 y versiones posteriores distinguen entre acceso de escritura solo y acceso completo al calendario. Solo incluye descripciones de uso de recordatorios si tu aplicación llama a las API de Recordatorios.

Referencia de Apple: Migrar a los niveles de acceso de calendario más recientes.

Agregue las permisos del calendario que necesita su aplicación a android/app/src/main/AndroidManifest.xml:

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

Referencia de Android: Permisos de usuario del proveedor de calendario.

import { CapacitorCalendar } from '@capgo/capacitor-calendar';
const permission = await CapacitorCalendar.requestFullCalendarAccess();
if (permission.result !== 'granted') {
throw new Error('Calendar permission was not granted');
}

Para aplicaciones que solo agregan eventos, utilice requestWriteOnlyCalendarAccess(). Para flujos de lectura solo de Android, utilice requestReadOnlyCalendarAccess().

Las fechas son timestamps de Unix en milisegundos.

import { CapacitorCalendar } from '@capgo/capacitor-calendar';
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);
await CapacitorCalendar.createEventWithPrompt({
title: 'Planning session',
location: 'Office',
startDate: Date.now() + 24 * 60 * 60 * 1000,
endDate: Date.now() + 25 * 60 * 60 * 1000,
});

En Android, las llamadas de creación y modificación basadas en solicitudes devuelven null. Listar eventos después si necesita encontrar el ID del evento creado.

const now = Date.now();
const oneWeekFromNow = now + 7 * 24 * 60 * 60 * 1000;
const { result: events } = await CapacitorCalendar.listEventsInRange({
from: now,
to: oneWeekFromNow,
});
const { result: calendars } = await CapacitorCalendar.listCalendars();
const { result: defaultCalendar } = await CapacitorCalendar.getDefaultCalendar();
const calendarId = defaultCalendar?.id ?? calendars[0]?.id;

selectCalendarsWithPrompt() está disponible en iOS cuando desees mostrar el calendario de sistema.

const permission = await CapacitorCalendar.requestFullRemindersAccess();
if (permission.result === 'granted') {
await CapacitorCalendar.createReminder({
title: 'Send launch notes',
dueDate: Date.now() + 2 * 24 * 60 * 60 * 1000,
notes: 'Created with @capgo/capacitor-calendar',
});
}

Las API de recordatorios son solo para iOS.

El repositorio incluye un ejemplo de aplicación Capacitor con comprobaciones de permisos, creación de eventos, promoción de eventos nativos, lista de calendarios y lista de rangos de eventos.

iOSAndroid
Demostración de iOS de creación de eventos de calendario nativosDemostración de Android de creación de eventos de calendario nativos

La referencia completa de API se mantiene en el archivo README del paquete y las definiciones de TypeScript: