React Calendar Overview

    El componente Ignite UI for React Calendar es liviano y fácil de configurar. Se utiliza para mostrar fechas y días laborables. También es la mejor manera de proporcionar vistas mensuales o anuales a los usuarios finales. El control Ignite UI for React Calendar le permite restringir los rangos de fechas mínimo y máximo por los que las personas pueden navegar.

    La Ignite UI para Ignite UI for React Calendar proporciona una forma fácil e intuitiva de mostrar información de fecha. Incluye diferentes funciones, como modos de selección de fecha única o múltiple, resaltado y selección de rango de fechas, navegación con teclado, habilitación de números de semana, opciones de tamaño y espaciado, y más.

    React Calendar Example

    El siguiente ejemplo del componente React IgrCalendar 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.

    How To Create a Calendar in React with Ignite UI

    Primero, debe instalar el paquete Ignite UI for React npm correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego deberá importar la Ignite UI for React IgrCalendar, su CSS necesario y registrar su módulo, así:

    import { IgrCalendarModule, IgrCalendar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrCalendarModule.register();

    Para obtener una introducción completa a Ignite UI for React, lea el tema Introducción.

    La forma más sencilla de comenzar a usar la Ignite UI for React IgrCalendar es la siguiente:

    <IgrCalendar />

    Selection Modes

    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, la Ignite UI for React IgrCalendar utiliza el modo de selección única, pero puede cambiarlo configurando la propiedad selection como se muestra en este ejemplo.

    <IgrCalendar selection="multiple" />

    Range Selection

    Siguiendo el mismo enfoque, podemos cambiar selection al modo rango:

    <IgrCalendar selection="range" />

    Active View and Date

    El componente Ignite UI for React Calendar le permite cambiar entre tres vistas diferentes: días, meses y años. La propiedad activeView del componente refleja la vista actual. De forma predeterminada, el Calendario muestra la fecha actual cuando se carga inicialmente. Puede modificar esto configurando la propiedad activeDate. La propiedad activeDate también refleja los cambios de la fecha actualmente visible realizados por el usuario final.

    Week numbers

    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} />

    La siguiente demostración ilustra un Calendario con números de semana habilitados:

    Multiple Months

    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} />

    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í:

    <IgbCalendar change={this.onCalendarChange} />

public onCalendarChange(calendar: IgrCalendar, e: IgrComponentDataValueChangedEventArgs) {

}

    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 vista days.

    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 vista months.

    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.

    Styling

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

    El siguiente ejemplo demuestra la configuración CSS anterior:

    API References

    Additional Resources