Resumen del calendario de Web Components

    El componente Ignite UI for Web Components Calendar es ligero y fácil de configurar. Se utiliza para mostrar fechas y días de la semana. También es la mejor manera de proporcionar vistas mensuales o anuales a los usuarios finales. El control Calendario Ignite UI for Web Components permite restringir los intervalos de fechas mínimos y máximos por los que los usuarios pueden navegar.

    El Ignite UI para Ignite UI for Web Components Calendario 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, resaltar y seleccionar 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

    The following Web Components IgcCalendarComponent component example shows a basic calendar with a single day selection mode. See how it works or inspect the code behind.

    How To Create a Calendar in Web Components with Ignite UI

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

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

defineComponents(IgcCalendarComponent);

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

    The simplest way to start using the Ignite UI for Web Components IgcCalendarComponent is as follows:

    <igc-calendar></igc-calendar>

    Selection Modes

    Users can choose from three different selection modes - single selection, multiple selection or range selection. By default, the Ignite UI for Web Components IgcCalendarComponent is using single selection mode but you can change it by setting the selection property as shown in this example.

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

    Range Selection

    Following the same approach, we can switch selection to range mode:

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

    Active View and Date

    The Ignite UI for Web Components Calendar component allows you to switch between three different views: days, months and years. The activeView property of the component reflects the current view. By default, the Calendar displays the current date when loaded initially. You could modify this by setting the activeDate property. The activeDate property also reflects the changes of the currently visible date made by the end user.

    Header Options

    By default, the Ignite UI for Web Components Calendar component renders a header area which contains information about the selected dates. You could hide the header by setting the HasHeader property to false. You could also configure vertical or horizontal orientation of the header using the headerOrientation property.

    [!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.

    The Ignite UI for Web Components Calendar component exposes a title slot which allows you to customize the title of the header.

    <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

    Due to their very nature, localization and formatting are essential to any calendar. In the Ignite UI for Web Components IgcCalendarComponent those are controlled and customized through the following properties - locale, formatOptions, weekStart.

    Let's go ahead and try those along with other customizations. First thing we need to set is the weekStart, which controls the starting day of the week. It defaults to Sunday, so we will set it to Monday. We will also customize the formatOptions property which specifies the options used to format the months and the weekdays in the Calendar views. Finally, we will set the locale property to a value, based on the user's location choice:

    <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

    In some cases you would want to have disabled dates in the Calendar which can't be selected by the end user. This functionality is achieved by using the disabledDates property. The disabledDates property is an array of DateRangeDescriptor objects. Each descriptor has a Type and optionally a dateRange which is an array of Date objects.

    These are the available options for the Type property:

    • After - disables the dates after the first date in the dateRange
    • Before - disables the dates before the first date in the dateRange
    • Between - disables the dates between the first and the second date in the dateRange
    • Specific - disables the dates specified in the dateRange array
    • Weekdays - disables all weekdays
    • Weekends - disables all weekends

    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

    The specialDates property is using almost the same configuration principles as the disabledDates. The special dates have a highlighted look and feel and unlike the disabled ones can be selected.

    Let's add some special dates to our Calendar. In order to do this, we will create a DateRangeDescriptor and pass the dates between the 3rd and the 8th of the current month:

    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

    You can use the showWeekNumbers property to show the week numbers of the Calendar component. You can do this by using its corresponding boolean attribute show-week-numbers like this:

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

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

    Multiple Months

    Using the visibleMonths property, you can display more than one month when the Calendar is in days view. When multiple months are displayed, you can configure whether you want to stack them vertically or horizontally by using the orientation property. By default, the orientation property is set to horizontal.

    The Calendar displays leading and trailing dates from the previous and the next months. You could hide these dates by setting the hideOutsideDays property to true or using its corresponding boolean attribute hideOutsideDays.

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

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

    Tamaño

    You could control the size and spacing of the calendar inner elements using the --ig-size CSS variable. The default size of the component is large.

    Eventos

    The Calendar component emits the Change event when the selected dates are changed by the end user. You can subscribe to the event like this:

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

    Navegación por teclado

    If you traverse the page using the TAB key you should keep in mind that based on W3 accessability recommendations the IgcCalendarComponent introduces the following tab stops:

    • 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

    When a day/month/year in the IgcCalendarComponent component is focused, 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.

    When a day inside the days view is focused, 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.

    When a month inside the months view is focused, use:

    • SPACE or ENTER key to change the activeDate to the currently focused month and switch to days view.

    When an year inside the years view is focused, use:

    • SPACE or ENTER key to change the activeDate to the currently focused year and switch to months view.

    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 or ENTER key to switch to months view.

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

    • SPACE or ENTER key to switch to years view.

    Styling

    ElIgcCalendarComponent 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.

    Using these CSS parts we can customize thе appearance of the IgcCalendarComponent component like this:

    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