Descripción general del calendario Web Components

El componente Calendario Ignite UI for Web Components 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 Calendario Ignite UI for Web Components le permite restringir los rangos de fechas mínimo y máximo por los que las personas pueden navegar.

La Ignite UI Ignite UI for Web Components proporciona una manera 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.

Web Components Calendar Example

El siguiente ejemplo del componente Web Components IgcCalendarComponent 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 Web Components with Ignite UI

Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents

import { defineComponents, IgcCalendarComponent } from 'igniteui-webcomponents';

defineComponents(IgcCalendarComponent);

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

La forma más sencilla de comenzar a utilizar la Ignite UI for Web Components IgcCalendarComponent es la siguiente:

<igc-calendar></igc-calendar>

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

<igc-calendar selection="multiple"></igc-calendar>

Range Selection

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

<!-- Range selection mode -->
<igc-calendar selection="range"></igc-calendar>

Active View and Date

El componente Calendario Ignite UI for Web Components 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.

Header Options

De forma predeterminada, el componente Calendario Ignite UI for Web Components muestra un área de encabezado que contiene información sobre las fechas seleccionadas. Puede ocultar el encabezado estableciendo la propiedad HasHeader en false. También puede configurar la orientación vertical u horizontal del encabezado usando la propiedad headerOrientation.

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

[!Note] Please note that the Ignite UI for Web Components 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 Calendario Ignite UI for Web Components expone un espacio title que le permite personalizar el título del encabezado.

<igc-calendar selection="range" header-orientation="vertical">
    <span slot="title">Trip dates</span>
</igc-calendar>

El siguiente ejemplo demuestra la configuración anterior:

Localization and Formatting

Por su propia naturaleza, la localización y el formato son esenciales para cualquier calendario. En la Ignite UI for Web Components IgcCalendarComponent, estos se controlan y personalizan a través de las siguientes propiedades: locale, formatOptions, weekStart.

Sigamos adelante y probémoslos junto con otras personalizaciones. Lo primero que debemos configurar es weekStart, que controla el día de inicio de la semana. El valor predeterminado es Sunday, por lo que lo configuraremos para Monday. También personalizaremos la propiedad formatOptions que especifica las opciones utilizadas para formatear los meses y los días de la semana en las vistas del Calendario. Finalmente, estableceremos la propiedad locale en un valor, según la elección de ubicación del usuario:

<igc-radio-group alignment="horizontal">
    <igc-radio name="locale" value="en" checked>EN</igc-radio>
    <igc-radio name="locale" value="de">DE</igc-radio>
    <igc-radio name="locale" value="fr">FR</igc-radio>
    <igc-radio name="locale" value="ar">AR</igc-radio>
    <igc-radio name="locale" value="ja">JA</igc-radio>
</igc-radio-group>

<igc-calendar
    id="calendar1"
    week-start="monday"
>
</igc-calendar>

this.calendar = document.getElementById('calendar1') as IgcCalendarComponent;
this.calendar.formatOptions = {
    month: 'short',
    weekday: 'short'
};

this.radios = document.querySelectorAll('igc-radio') as NodeListOf<IgcRadioComponent>;
this.radios.forEach(radio => {
    radio.addEventListener('igcChange', () => {
        if (radio.checked) {
            this.calendar.locale = radio.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 deshabilitadas en el Calendario que el usuario final no puede seleccionar. Esta funcionalidad se logra mediante el uso de la disabledDates. La propiedad disabledDates es una matriz de objetos DateRangeDescriptor. Cada descriptor tiene un Type y, opcionalmente, un rango de dateRange que es una matriz de objetos Date.

Estas son las opciones disponibles para la propiedad Type:

After: desactiva las fechas posteriores a la primera fecha en el dateRange
Before: desactiva las fechas anteriores a la primera fecha en el dateRange
Between: desactiva las fechas entre la primera y la segunda fecha en el dateRange
Specific: desactiva las fechas especificadas en la matriz dateRange
Weekdays: desactiva todos los días laborables
Weekends: desactiva 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 }];

Estas configuraciones deberían tener el siguiente resultado:

Special dates

La propiedad specialDates utiliza casi los mismos principios de configuración disabledDates. Las fechas especiales tienen una apariencia resaltada y, a diferencia de las fechas para discapacitados, se pueden seleccionar.

Agreguemos algunas fechas especiales a nuestro Calendario. Para hacer esto, crearemos un DateRangeDescriptor 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 }];

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

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:

<igc-calendar show-week-numbers></igc-calendar>

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.

<igc-calendar visible-months="2" hide-outside-days></igc-calendar>

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

this.calendar.addEventListener('igcChange', ev => console.log(ev.detail));

Si recorre la página usando la tecla Tab, debe tener en cuenta que, según las recomendaciones de accesibilidad de W3, IgcCalendarComponent 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 IgcCalendarComponent, 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: