React Calendar Overview
El componente Calendario Ignite UI for React es liviano y fácil de configurar. Se utiliza para mostrar fechas y días de la semana. También es la mejor manera de brindar vistas mensuales o anuales a los usuarios finales. El control Calendario Ignite UI for React le permite restringir los rangos de fechas mínimos y máximos por los que las personas pueden navegar.
La Ignite UI Ignite UI for React ofrece una forma sencilla e intuitiva de mostrar información sobre fechas. Incluye distintas funciones, como modos de selección de una o varias fechas, resaltar y seleccionar un rango de fechas, navegación con el teclado, habilitación de números de semana, opciones de tamaño y espaciado, y más.
React Ejemplo de calendario
El siguiente ejemplo del componente IgrCalendar
React muestra un calendario básico con un modo de selección de un solo día. Vea cómo funciona o inspeccione el código subyacente.
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Cómo crear un calendario en React con Ignite UI
Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:
npm install igniteui-react
cmd
Luego necesitarás importar la Ignite UI for React IgrCalendar
, su CSS necesario y registrar su módulo, de la siguiente manera:
import { IgrCalendarModule, IgrCalendar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrCalendarModule.register();
tsx
Para obtener una introducción completa a la Ignite UI for React, lea el tema Primeros pasos.
La forma más sencilla de empezar a utilizar el Ignite UI for React IgrCalendar
es la siguiente:
<IgrCalendar />
tsx
Modos de selección
Los usuarios pueden elegir entre tres modos de selección diferentes: selección única, selección múltiple o selección de rango. De forma predeterminada, el Ignite UI for React IgrCalendar
utiliza el modo de selección única, pero puede cambiarlo estableciendo la selection
propiedad como se muestra en este ejemplo.
<IgrCalendar selection="multiple" />
tsx
Selección de rango
Siguiendo el mismo enfoque, podemos cambiar selection
al modo rango:
<IgrCalendar selection="range" />
tsx
Vista activa y fecha
El componente Calendario Ignite UI for React le permite cambiar entre tres vistas diferentes: días, meses y años. La activeView
propiedad del componente refleja la vista actual. De forma predeterminada, el calendario muestra la fecha actual cuando se carga inicialmente. Puede modificar esto estableciendo la activeDate
propiedad. La activeDate
propiedad también refleja los cambios de la fecha actualmente visible realizados por el usuario final.
Números de semana
Puede utilizar la propiedad showWeekNumbers
para mostrar los números de semana del componente Calendario. Puedes hacer esto usando su atributo booleano correspondiente show-week-numbers
como este:
<IgrCalendar showWeekNumbers={true} />
tsx
La siguiente demostración ilustra un Calendario con números de semana habilitados:
Varios meses
Usando la propiedad visibleMonths
, puede mostrar más de un mes cuando el Calendario está en vista days
. Cuando se muestran varios meses, puede configurar si desea apilarlos vertical u horizontalmente utilizando la propiedad orientation
. De forma predeterminada, la propiedad orientation
está establecida en horizontal
.
El Calendario muestra las fechas iniciales y finales del mes anterior y siguiente. Puede ocultar estas fechas estableciendo la propiedad hideOutsideDays
en verdadero o usando su atributo booleano correspondiente hideOutsideDays
.
<IgrCalendar visibleMonths={2} hideOutsideDays={true} />
tsx
El siguiente ejemplo demuestra la configuración de varios meses:
Tamaño
Puede controlar el tamaño y el espaciado de los elementos internos del calendario utilizando la variable CSS--ig-size
. El tamaño predeterminado del componente es grande.
Eventos
El componente Calendario emite el evento Change
cuando el usuario final cambia las fechas seleccionadas. Puedes suscribirte al evento así:
<IgrCalendar change={this.onCalendarChange} />
public onCalendarChange(calendar: IgrCalendar, e: IgrComponentDataValueChangedEventArgs) {
}
tsx
Navegación por teclado
Si recorre la página usando la tecla Tab, debe tener en cuenta que, según las recomendaciones de accesibilidad de W3, IgrCalendar
presenta las siguientes tabulaciones:
- Botón de selección de mes
- Botón de selección de año
- Botón anterior
- Siguiente botón
- Elemento de fecha activo
Cuando se enfoca un día/mes/año en el componente IgrCalendar
, use:
- Tecla Re Pág para pasar a la página del mes/año/año anterior.
- Tecla AvPág para pasar a la página del mes/año/año siguiente.
- Tecla de inicio para enfocar el primer día del mes actual/primer mes a la vista/primer año a la vista.
- Tecla Fin para enfocar el último día del mes actual/último mes visto/último año visto.
- Teclas de flecha para navegar por los días/meses/años. Navegar antes del primer elemento y después del último elemento cambiará la vista a la página del mes/año/año siguiente/anterior.
Cuando un día dentro de la vista days
esté enfocado, use:
- Teclas Shift + Re Pág para pasar al año anterior.
- Teclas Shift + Av Pág para pasar al año siguiente.
- Tecla Espacio o Intro para seleccionar el día enfocado actualmente.
Cuando se enfoca un mes dentro de la vista months
, use:
- Tecla Espacio o Intro para cambiar la
activeDate
al mes actualmente enfocado y cambiar a la vistadays
.
Cuando se enfoca un año dentro de la vista years
, use:
- Tecla Espacio o Intro para cambiar la
activeDate
al año actualmente enfocado y cambiar a la vistamonths
.
Cuando los botones anterior o siguiente (en el subtítulo) estén enfocados, use:
- Tecla Espacio o Intro para cambiar a la página del mes/año/año anterior/siguiente.
Cuando el botón del mes (en el subtítulo) esté enfocado, use:
- Tecla Espacio o Intro para cambiar a la vista
months
.
Cuando el botón del año (en el subtítulo) esté enfocado, use:
- Tecla Espacio o Intro para cambiar a la vista
years
.
Estilo
El componente Calendario expone partes CSS para casi todos sus elementos internos. La siguiente tabla enumera todas las partes CSS expuestas por el Calendario:
Nombre | Descripción |
---|---|
encabezamiento | El elemento de encabezado. |
título-encabezado | El elemento del título del encabezado. |
fecha-encabezado | El elemento de fecha del encabezado. |
contenido | El elemento de contenido que contiene las vistas y los elementos de navegación. |
navegación | El elemento contenedor de navegación. |
meses-navegacion | El elemento del botón de navegación de meses. |
años-navegación | El elemento del botón de navegación de años. |
rango de años | El elemento de rango de años. |
botones de navegacion | El contenedor de botones de navegación. |
botón de navegación | Botón de navegación anterior/siguiente. |
contenedor-vista-días | El elemento contenedor de vista de días. |
vista de días | Elemento de vista de días. |
vista de meses | El elemento de vista de meses. |
vista de años | El elemento de vista de años. |
fila de días | Elemento de fila de días. |
etiqueta | Elemento de etiqueta de encabezado de semana. |
Número de la semana | Elemento de número de semana. |
número-de-semana-interno | Elemento interior del número de semana. |
fecha | Elemento de fecha. |
fecha interna | Elemento interior de fecha. |
primero | El primer elemento de fecha seleccionado. |
último | El último elemento de fecha seleccionado. |
inactivo | Elemento de fecha inactivo. |
oculto | Elemento de fecha oculto. |
fin de semana | Elemento de fecha de fin de semana. |
rango | Rango del elemento seleccionado. |
especial | Elemento de fecha especial. |
desactivado | Elemento de fecha deshabilitado. |
soltero | Elemento de fecha único seleccionado. |
avance | Elemento de fecha de vista previa de selección de rango. |
mes | Elemento mes. |
mes interior | Elemento interior del mes. |
año | Elemento año. |
año interno | Elemento interior del año. |
seleccionado | Indica el estado seleccionado. Se aplica a los elementos de fecha, mes y año. |
actual | Indica el estado actual. Se aplica a los elementos de fecha, mes y año. |
Usando estas partes CSS podemos personalizar la apariencia del componente Calendario de esta manera:
igc-calendar::part(header) {
background: #345779;
}
igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected) {
background: #345779;
border-color: #345779;
}
igc-calendar::part(date-inner current),
igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus,
igc-calendar::part(months-navigation):hover,
igc-calendar::part(months-navigation):focus,
igc-calendar::part(years-navigation):hover,
igc-calendar::part(years-navigation):focus {
color: #2dabe8;
}
igc-calendar::part(date-inner current selected),
igc-calendar::part(month-inner current selected),
igc-calendar::part(year-inner current selected) {
box-shadow: inset 0 0 0 0.0625rem white, 0 0 0 0.0625rem #345779;
color: white;
}
css
El siguiente ejemplo demuestra la configuración CSS anterior:
Referencias de API
IgrCalendar
IgrRadio
IgrRadioGroup
activeDate
activeView
After
Before
Between
Change
DateRangeDescriptor
DateRangeType
dateRange