Componente Calendar para Angular | ng-hub-ui-calendar
Componente calendario para Angular con vistas de eventos, drag and drop, plantillas, internacionalización y variables CSS para interfaces de scheduling.
Visión General
Por qué los equipos buscan esta librería
Este componente calendario para Angular está diseñado para interfaces de scheduling que necesitan vistas configurables, renderizado de eventos, drag and drop y theming listo para producción.
Instalación
npm install ng-hub-ui-calendarIr a
Ideal para
- herramientas de reservas
- calendarios de equipo
- planificación de recursos
- gestión de eventos
Sobre calendar
ng-hub-ui-calendar ayuda a los equipos Angular a construir herramientas de reservas, agendas de equipo y pantallas de planificación con una superficie de calendario reutilizable. Soporta el tipo de renderizado e interacción con eventos que se espera en productos reales de scheduling.
Guías de uso
Vistas
Múltiples modos de vista del calendario
Ejemplos:
Vista mensual
Cuadrícula mensual tradicional con semanas y días
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Vista semanal
Vista semanal con franjas horarias
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Vista diaria
Vista de un solo día con franjas por hora
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Vista anual
Resumen anual con navegación por meses
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Navegación
Controles de navegación del calendario
Ejemplos:
Anterior/Siguiente
Navega entre periodos
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Botón de hoy
Salta a la fecha actual
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Cambio de vista
Cambia entre modos de vista
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Eventos
Visualización e interacción con eventos
Ejemplos:
Visualización de eventos
Muestra eventos sobre los días del calendario
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Click sobre evento
Gestiona la interacción al hacer click en un evento
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Click sobre día
Gestiona la interacción al hacer click en una celda de día
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Drag & drop
Mueve eventos entre días
Ejemplos:
Mover eventos
Arrastra eventos a nuevas fechas usando CDK
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Plantillas
Plantillas de renderizado personalizadas
Ejemplos:
Plantilla de evento
Personaliza la apariencia del evento con eventTpt
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Plantilla de celda de día
Personaliza las celdas de día con dayCellTpt
La vista previa en vivo todavía no está disponible para este ejemplo.
Código
Características clave
Múltiples vistas de calendario
Renderiza layouts diarios, semanales o de planificación sin construir una cuadrícula de calendario desde cero.
Scheduling orientado a eventos
Útil para reservas, planificación de equipos, asignación de recursos e interfaces de gestión de eventos.
Interacción drag and drop
Mueve y actualiza eventos directamente dentro del calendario cuando el flujo necesita manipulación rápida.
Cambios recientes
Version 21.1.1 - 3/19/26, 12:00 AM
changed: Co-locate SCSS with component via styleUrl; no manual @use import needed.
changed: Removed hardcoded design system token defaults from stylesheet.
fixed: Fixed grid overflow: added min-width: 0 to tracks, day cells, and event containers.
Version 21.1.0 - 3/10/26, 12:00 AM
added: Multiple calendar views: month, week, day, year.
added: Native drag-and-drop event support.