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 Calendar Example

    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.

    How To Create a Calendar in React with Ignite UI

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

    npm install igniteui-react

    A continuación, tendrás que importar el Ignite UI for React IgrCalendar y su CSS necesario, de la siguiente manera:

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

    Para una introducción completa al Ignite UI for React, lee el tema Empezar.

    La forma más sencilla de empezar a utilizar el 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, 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" />

    Range Selection

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

    <IgrCalendar selection="range" />

    Active View and Date

    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.

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

    <IgrCalendar onChange={this.onCalendarChange} />

public onCalendarChange(e: IgrComponentDataValueChangedEventArgs) {

}

    Navegación por teclado

    Si recorre la página con la TAB clave, debe tener en cuenta que, según las recomendaciones de accesibilidad de W3, IgrCalendar se introducen 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:

    • PAGE UP para pasar a la página de mes/año/años anteriores.
    • PAGE DOWN para pasar a la página Siguiente mes/año/años.
    • HOME clave para enfocar el primer día del mes actual / primer mes a la vista / primer año a la vista.
    • END Clave para enfocar el último día del mes actual / último mes a la vista / último año a la vista.
    • 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:

    • SHIFT + PAGE UP teclas para pasar al año anterior.
    • SHIFT + PAGE DOWN teclas para pasar al año siguiente.
    • SPACE o ENTER para seleccionar el día actualmente enfocado.

    Cuando se enfoca un mes dentro de la vista months, use:

    • SPACE o ENTER para cambiar el activeDate al mes actualmente enfocado y cambiar a days ver.

    Cuando se enfoca un año dentro de la vista years, use:

    • SPACE o ENTER clave para cambiar el activeDate al año actualmente enfocado y cambiar a months ver.

    Cuando los botones anterior o siguiente (en el subtítulo) estén enfocados, use:

    • SPACE o ENTER clave para cambiar a la página del mes/año/años anterior/siguiente.

    Cuando el botón del mes (en el subtítulo) esté enfocado, use:

    • SPACE o ENTER para cambiar a months la vista.

    Cuando el botón del año (en el subtítulo) esté enfocado, use:

    • SPACE o ENTER para cambiar a years la vista.

    Styling

    El IgrCalendar componente expone partes CSS para casi todos sus elementos internos. En la tabla siguiente se enumeran todas las partes CSS expuestas:

    Nombre Descripción
    header El elemento de encabezado.
    header-title El elemento del título del encabezado.
    header-date El elemento de fecha del encabezado.
    content El elemento de contenido que contiene las vistas y los elementos de navegación.
    navigation El elemento contenedor de navegación.
    months-navigation El elemento del botón de navegación de meses.
    years-navigation El elemento del botón de navegación de años.
    years-range El elemento de rango de años.
    navigation-buttons El contenedor de botones de navegación.
    navigation-button Botón de navegación anterior/siguiente.
    days-view-container El elemento contenedor de vista de días.
    days-view Elemento de vista de días.
    months-view El elemento de vista de meses.
    years-view El elemento de vista de años.
    days-row Elemento de fila de días.
    label Elemento de etiqueta de encabezado de semana.
    week-number Elemento de número de semana.
    week-number-inner Elemento interior del número de semana.
    date Elemento de fecha.
    date-inner Elemento interior de fecha.
    first El primer elemento de fecha seleccionado.
    last El último elemento de fecha seleccionado.
    inactive Elemento de fecha inactivo.
    hidden Elemento de fecha oculto.
    weekend Elemento de fecha de fin de semana.
    range Rango del elemento seleccionado.
    special Elemento de fecha especial.
    disabled Elemento de fecha deshabilitado.
    single Elemento de fecha único seleccionado.
    preview Elemento de fecha de vista previa de selección de rango.
    month Elemento mes.
    month-inner Elemento interior del mes.
    year Elemento año.
    year-inner Elemento interior del año.
    selected Indica el estado seleccionado. Se aplica a los elementos de fecha, mes y año.
    current 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 de la IgrCalendar siguiente manera:

    igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected),
igc-calendar::part(month-inner selected):focus,
igc-calendar::part(year-inner selected):focus {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
}

igc-calendar::part(date-inner selected):hover,
igc-calendar::part(month-inner selected):hover,
igc-calendar::part(year-inner selected):hover {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
}

igc-calendar::part(label),
igc-calendar::part(navigation-button),
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: var(--ig-primary-300);
}

igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus {
  color: var(--ig-primary-800);
}

    El siguiente ejemplo demuestra la configuración CSS anterior:

    API References

    Additional Resources