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 ReactIgrCalendar componente muestra un calendario básico con un modo de selección de un solo día. Mira cómo funciona o revisa el código que hay detrás.

    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

    Luego tendrás que importar el Ignite UI for ReactIgrCalendar y su CSS necesario, así:

    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 usar el Ignite UI for ReactIgrCalendar 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. Por defecto, el Ignite UI for ReactIgrCalendar usa el modo de selección única, pero puedes cambiarlo configurando laselection propiedad como se muestra en este ejemplo.

    <IgrCalendar selection="multiple" />

    Range Selection

    Siguiendo el mismo enfoque, podemos cambiarselection al modo de rango:

    <IgrCalendar selection="range" />

    Active View and Date

    El componente Ignite UI for React Calendario te permite cambiar entre tres vistas diferentes: días, meses y años. LaactiveView propiedad del componente refleja la visión actual. Por defecto, el Calendario muestra la fecha actual cuando se carga inicialmente. Podrías modificar esto configurando laactiveDate propiedad. LaactiveDate propiedad también refleja los cambios en la fecha visible actualmente realizados por el usuario final.

    Header Options

    Por defecto, el componente Ignite UI for React Calendar muestra un área de cabecera que contiene información sobre las fechas seleccionadas. Podrías ocultar el encabezado poniendo laHasHeader propiedad en false. También podrías configurarvertical la orientaciónhorizontal del encabezado usando laheaderOrientation propiedad.

    [!Note] Please note that the Ignite UI for React Calendar header is not rendered when the selection is set to multiple.

    [!Note] Please note that the Ignite UI for React Calendar DOM properties use camelCase naming while their corresponding HTML attributes are using kebab-case. For example the headerOrientation property corresponds to the header-orientation attribute.

    El componente Ignite UI for React Calendario muestra unatitle ranura que permite personalizar el título del encabezado.

    <IgrCalendar selection="range" headerOrientation="vertical">
    <span slot="title">Trip dates</span>
</IgrCalendar>

    El siguiente ejemplo demuestra la configuración anterior:

    Localization and Formatting

    Debido a su propia naturaleza, la localización y el formato son esenciales en cualquier calendario. En el Ignite UI for ReactIgrCalendar estos se controlan y personalizan mediante las siguientes propiedades -locale,formatOptions,weekStart.

    Vamos a probar esas junto con otras personalizaciones. Lo primero que tenemos que establecer es elweekStart, que controla el día de inicio de la semana. Por defecto loSunday hace, así que lo configuraremos comoMonday. También personalizaremos laformatOptions propiedad, especificando las opciones utilizadas para formatear los meses y los días laborables en las vistas del Calendario. Finalmente, estableceremos lalocale propiedad a un valor, basado en la ubicación que elija el usuario:

    <IgrRadioGroup alignment="horizontal" value={this.state.calendarLocale}>
    <IgrRadio name="lang" value="en" checked={true} onChange={this.onRadioChange}>
        <span>EN</span>
    </IgrRadio>
    <IgrRadio name="lang" value="de" onChange={this.onRadioChange}>
        <span>DE</span>
    </IgrRadio>
    <IgrRadio name="lang" value="fr" onChange={this.onRadioChange}>
        <span>FR</span>
    </IgrRadio>
    <IgrRadio name="lang" value="ar" onChange={this.onRadioChange}>
        <span>AR</span>
    </IgrRadio>
    <IgrRadio name="lang" value="ja" onChange={this.onRadioChange}>
        <span>JA</span>
    </IgrRadio>                    
</IgrRadioGroup>

<IgrCalendar weekStart='monday' formatOptions={this.state.calendarFormat} 
    locale={this.state.calendarLocale}
    value={new Date()}/>

    constructor(props: any) {
    super(props);
    this.onRadioChange = this.onRadioChange.bind(this);
    const formatOptions: IgrCalendarFormatOptions = {
        month: 'short',
        weekday: 'short',
    }
    this.state = { calendarLocale: "en", calendarFormat: formatOptions };
}

public onRadioChange(e: any) {
    if (e.detail.checked) {
        this.setState({ calendarLocale: e.detail.value });
    }
}

    Si todo salió bien, ahora deberíamos tener un Calendario con visualización personalizada, que también cambia la representación local, según la selección del usuario. Echemos un vistazo:

    Disabled dates

    En algunos casos querrás tener fechas desactivadas en el calendario que el usuario final no pueda seleccionar. Esta funcionalidad se consigue utilizando ladisabledDates propiedad. LadisabledDates propiedad es un array deDateRangeDescriptor objetos. Cada descriptor tiene unType y opcionalmente undateRange que es un array deDate objetos.

    Estas son las opciones disponibles para laType propiedad:

    • After- desactiva las fechas después de la primera cita en eldateRange
    • Before- desactiva las fechas previas a la primera fecha en eldateRange
    • Between- desactiva las fechas entre la primera y la segunda fecha en eldateRange
    • Specific- desactiva las fechas especificadas en eldateRange array
    • Weekdays- desactiva todos los días laborables
    • Weekends- incapacita todos los fines de semana

    Creemos una muestra que deshabilite las fechas entre el 3 y el 8 del mes actual:

    const today = new Date(Date.now());
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];

this.calendar.disabledDates = [{ type: DateRangeType.Between, dateRange: range }];

    <IgrCalendar disabledDates={this.state.disabledDates}/>

    const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];
const desc: DateRangeDescriptor = {
    dateRange: range,
    type: DateRangeType.Specific,
}
const disabledDates = [desc];
this.state = { disabledDates };

    Estas configuraciones deberían tener el siguiente resultado:

    Special dates

    LaspecialDates propiedad utiliza casi los mismos principios de configuración que.disabledDates Las fechas especiales tienen un aspecto y ambiente destacados y, a diferencia de las para personas con discapacidad, se pueden seleccionar.

    Vamos a añadir algunas fechas especiales a nuestro calendario. Para ello, crearemos unaDateRangeDescriptor y pasaremos las fechas entre el 3 y el 8 del mes actual:

    const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
];

this.calendar.specialDates = [{ type: DateRangeType.Between, dateRange: range }];

    <IgrCalendar specialDates={this.state.specialDates}/>

    const today = new Date();
const range = [
    new Date(today.getFullYear(), today.getMonth(), 3),
    new Date(today.getFullYear(), today.getMonth(), 8)
]
const desc: DateRangeDescriptor = {
    dateRange: range,
    type: DateRangeType.Between,
}
const specialDates = [desc]
this.state = { specialDates };

    La siguiente demostración ilustra un Calendario con una opción de solicitud de vacaciones:

    Week numbers

    Puedes usar lashowWeekNumbers propiedad para mostrar los números de semana del componente Calendario. Puedes hacerlo usando su atributoshow-week-numbers booleano correspondiente así:

    <IgrCalendar showWeekNumbers={true} />

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

    Multiple Months

    Con lavisibleMonths propiedad, puedes mostrar más de un mes cuando el Calendario está adays la vista. Cuando se muestran varios meses, puedes configurar si quieres apilarlos vertical u horizontalmente usando laorientation propiedad. Por defecto, laorientation propiedad está configurada comohorizontal.

    El calendario muestra las fechas de inicio y de final de los meses anteriores y siguientes. Podrías ocultar estas fechas configurando lahideOutsideDays propiedad como verdadero o usando su atributohideOutsideDays booleano correspondiente.

    <IgrCalendar visibleMonths={2} hideOutsideDays={true} />

    El siguiente ejemplo demuestra la configuración de varios meses:

    Tamaño

    Podrías controlar el tamaño y el espacio de los elementos internos del calendario usando la--ig-size variable CSS. El tamaño por defecto del componente es grande.

    Eventos

    El componente Calendario emite elChange evento 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 recorres la página usando la TAB clave, debes tener en cuenta que, según las recomendaciones de accesibilidad de W3, introducenIgrCalendar los siguientes puntos de pestaña:

    • 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 centra un día/mes/año en elIgrCalendar componente, usa:

    • 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 ladays vista esté enfocado, utiliza:

    • 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 un mes dentro de lamonths vista esté enfocado, usa:

    • SPACE O ENTER clave para cambiaractiveDate al mes actualmente enfocado y cambiar adays la vista.

    Cuando se enfoca un año dentro de layears vista, utiliza:

    • SPACE O ENTER clave para cambiaractiveDate el año al que se enfoca actualmente y cambiar amonths la vista.

    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 clave para cambiar amonths vista.

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

    • SPACE O ENTER clave para cambiar ayears vista.

    Styling

    ElIgrCalendar componente expone las piezas CSS de casi todos sus elementos internos. La siguiente tabla enumera 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 piezas CSS podemos personalizar la apariencia delIgrCalendar componente de esta 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