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

Demostración

Demostraciones 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
Demo de Android de creación de eventos de calendario nativos
Creación de eventos de Android

Guide

Cómo usar el Calendario en Capacitor

Prueba en dispositivo

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

Vista previa del plugin de calendario QR code

Usando @capgo/capacitor-calendar

La @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 IU Del Evento Nativo

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

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 iOS y Android capturen el nativo code. 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?

Capgo plugins 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 gratuito y de código abierto?

Sí. El código fuente de code está público 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 cambios.

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

Instalar o actualizar el plugin cambia el nativo code, 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 instantáneamente 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.

Inicia con Capgo