Pase a contenido principal
@capgo/capacitor-calendario Dispositivos de API Fuente abierta

Calendario plugin de Capacitor

Gestiona 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

Demo

Demos del 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
Demo 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

Probar en dispositivo

Descargue la aplicación Capgo, luego escane 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 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 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,
});

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

Recordatorios solo están disponibles en iOS.

Referencia Completa

FAQ

FAQ del Calendario

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

Ejecuta &quot;bun add @capgo/capacitor-calendar&quot; (o &quot;npm install @capgo/capacitor-calendar&quot;), luego ejecuta &quot;bunx cap sync&quot; para que los proyectos de iOS y Android capturen el calendario nativo code. Importa desde &quot;@capgo/capacitor-calendar&quot; 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 de Capgo siguen la versión mayor de Capacitor: utiliza 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 del GitHub lista las versiones mantenidas.

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

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 agradecen los informes de errores y solicitudes de extracción.

¿Puedo actualizar el 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 en JavaScript, HTML y CSS que llaman al plugin pueden enviar con actualizaciones Capgo 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