Ir al contenido principal
@capgo/capacitor-calendario Dispositivos de API Fuente abierta

Calendario plugin de Capacitor

Administrar eventos de calendario nativos en iOS y Android, con soporte para recordatorios 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

Demostración

Demos de calendario

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

Recursos de origen
Demo de iOS de creación de eventos de calendario nativos
Creación de eventos de iOS
Demostración de Android de creación de eventos de calendario nativos
Creación de eventos de Android

Guía

Cómo usar el calendario en Capacitor

Prueba en dispositivo

Descarga la aplicación Capgo, luego escanea el código QR code.

Vista previa del plugin de calendario QR code

Usando @capgo/capacitor-calendar

El @capgo/capacitor-calendar El paquete permite a una aplicación Capacitor gestionar eventos de calendario nativos en iOS y Android. Puede solicitar permisos de calendario, crear y editar eventos, abrir la interfaz de usuario de calendario nativa, listar calendarios y eventos, y gestionar recordatorios en iOS.

Instalar

npm install @capgo/capacitor-calendar
npx cap sync

Configurar Permisos Nativos

En iOS, 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>NSRemindersFullAccessUsageDescription</key>
<string>This app needs permission to read and manage reminders.</string>

En Android, agrega los permisos de calendario que tu aplicación necesita a 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 de Usuario de Evento Nativa

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

iOS Recordatorios

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

Preguntas frecuentes del plugin de calendario

¿Cómo instalo el plugin de calendario en una aplicación Capacitor?

Ejecuta "bun add @capgo/capacitor-calendar" (o "npm install @capgo/capacitor-calendar"), luego ejecuta "bunx cap sync" para que los proyectos de iOS y Android capturen el code nativo. Importa desde "@capgo/capacitor-calendar" en tu aplicación code.

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

Sí. El calendario es un paquete 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 Capgo siguen la versión mayor de Capacitor: utilice la versión mayor del plugin que coincida con la versión mayor de Capacitor (por ejemplo, plugin v8 con Capacitor 8). La tabla de compatibilidad en el README de GitHub lista las versiones mantenidas.

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

Sí. El código fuente de code está disponible en GitHub en https://github.com/Cap-go/capacitor-calendar/ y el paquete es gratuito para instalar desde npm. Se aceptan informes de errores y solicitudes de extracción.

Puedo actualizar code que utiliza el Calendario sin una revisión de la Tienda?

Instalar o actualizar el plugin cambia el code nativo, por lo que necesita una nueva compilación de la tienda. Después de eso, los cambios de JavaScript, HTML y CSS que llaman al plugin pueden enviar con Capgo actualizaciones en vivo.

Envía cambios en el calendario sin esperar a la revisión de la aplicación

Una vez que el plugin esté en tu tienda de construcción, Capgo actualizaciones en vivo envían cambios en JavaScript, HTML y CSS a los usuarios en minutos.

Comienza con Capgo