Saltar al contenido principal
@capgo/capacitor-calendar API de dispositivos Código abierto

Calendario plugin Capacitor

Gestiona eventos del calendario nativo en iOS y Android, con soporte para Reminders de iOS

Instalar

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

Demo

Demos de calendario

Creación nativa de eventos de calendario en iOS y Android, exportados como demos en WebP animado.

Assets de origen
Demo de iOS para crear eventos nativos en el calendario
Creación de eventos en iOS
Demo de Android para la creación de eventos de calendario nativo
Creación de eventos en Android

Guía

Cómo usar Calendar en Capacitor

Probar en el dispositivo

Descarga la app Capgo y escanea el QR code.

QR de vista previa del plugin calendario code

Usando @capgo/capacitor-calendar

El @capgo/capacitor-calendar El paquete permite que una app de Capacitor gestione eventos de calendario nativos en iOS y Android. Puede solicitar permisos de calendario, crear y editar eventos, abrir la interfaz nativa del calendario, listar calendarios y eventos, y gestionar recordatorios en iOS.

Instalar

npm install @capgo/capacitor-calendar
npx cap sync

Configurar permisos nativos

En iOS, añade las descripciones de uso que tu app necesita en 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>

En Android, añade los permisos de calendario que tu app necesita en android/app/src/main/AndroidManifest.xml:

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

Solicitar permiso

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

const permission = await CapacitorCalendar.requestFullCalendarAccess();

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

Crear un evento

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

Abrir la interfaz nativa de eventos

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

Listar eventos

const now = Date.now();

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

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

Los recordatorios solo están disponibles en iOS.

Referencia completa

FAQ

FAQ del plugin Calendar

¿Cómo instalo el plugin Calendar en una app de Capacitor?

Ejecuta &quot;bun add @capgo/capacitor-calendar&quot; (o &quot;npm install @capgo/capacitor-calendar&quot;) y luego &quot;bunx cap sync&quot; para que los proyectos de iOS y Android carguen el código nativo code. Impórtalo desde &quot;@capgo/capacitor-calendar&quot; en el código de tu app code.

¿Funciona @capgo/capacitor-calendar con React, Vue y Angular?

Sí. Calendar es un paquete de Capacitor, por lo que funciona con cualquier framework web que se ejecute dentro de Capacitor, incluyendo Ionic, React, Vue, Angular, Svelte y JavaScript puro.

¿Qué versión de Capacitor soporta @capgo/capacitor-calendar?

Los plugins de Capgo siguen la versión mayor de Capacitor: usa la versión mayor del plugin que coincida con la versión mayor de tu Capacitor (por ejemplo, el plugin v8 con Capacitor 8). La tabla de compatibilidad del README de GitHub lista las versiones mantenidas.

¿Es @capgo/capacitor-calendar gratuito y de código abierto?

Sí. El código fuente de code es público en GitHub, en https://github.com/Cap-go/capacitor-calendar/, y el paquete se puede instalar gratis desde npm. Los reportes de errores y pull requests son bienvenidos.

¿Puedo actualizar code que usa Calendar sin pasar por la revisión de la App Store?

Instalar o actualizar el plugin cambia el code nativo, así que requiere un nuevo build para la tienda. Después, los cambios de JavaScript, HTML y CSS que llamen al plugin se pueden publicar al instante con las live updates de Capgo.

Publica cambios en Calendar sin esperar la revisión de la app

Una vez que el plugin esté en tu store build, Capgo live updates envía tus cambios de JavaScript, HTML y CSS a los usuarios en minutos.

Empieza con Capgo