Descripción general del componente de calendario Angular

    Angular Calendar es un componente de la interfaz de usuario que se utiliza para mostrar fechas y días en una aplicación. Al admitir diferentes funciones, permite a los usuarios administrar fácilmente las funcionalidades del calendario, arrastrar y crear eventos en un calendario, navegar a una fecha preferida en él y mostrar eventos en una vista mensual, semanal o diaria del calendario Angular con un solo clic.

    La Ignite UI for Angular Calendar, desarrollada como un componente nativo Angular, proporciona formas fáciles e intuitivas de mostrar información de fechas, habilitar fechas o aplicar el modo de desactivación de fechas del calendario Angular. Los usuarios pueden elegir entre tres modos de selección diferentes: selección única, selección múltiple o selección de rango.

    Angular Calendar Example

    Creamos el siguiente ejemplo Angular Calendar utilizando la Ignite UI for Angular Calendar. Muestra rápidamente cómo se ve y se siente un calendario básico, cómo los usuarios pueden elegir y resaltar una fecha única y cómo avanzar y retroceder a una fecha específica.

    Getting Started with Ignite UI for Angular Calendar

    Para comenzar con el componente Ignite UI for Angular Calendar, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxCalendarModule en su archivo app.module.ts.

    Note

    El IgxCalendarComponent también depende de las interacciones táctiles y BrowserAnimationsModule, opcionalmente, del HammerModule for, por lo que también deben agregarse al AppModule:

    // app.module.ts
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxCalendarModule } from 'igniteui-angular';
// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., BrowserAnimationsModule, HammerModule, IgxCalendarModule],
    ...
})
export class AppModule {}

    Alternativamente, a partir de 16.0.0, puede importar IgxCalendarComponent como una dependencia independiente o usar el token IGX_CALENDAR_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

    // home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IGX_CALENDAR_DIRECTIVES } from 'igniteui-angular';
// import { IGX_CALENDAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-calendar></igx-calendar>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [BrowserAnimationsModule, HammerModule, IGX_CALENDAR_DIRECTIVES]
    /* or imports: [BrowserAnimationsModule, HammerModule, IgxCalendarComponent] */
})
export class HomeComponent {}

    Ahora que ha importado la Ignite UI for Angular Calendar, puede comenzar a usar el componente igx-calendar.

    Note

    ​IgxCalendarComponent utiliza la API web internacional para localizar y formatear fechas. Considere utilizar polyfills adecuados si su plataforma de destino no los admite.

    Using the Angular Calendar

    Angular Single Selection Calendar

    Crear una instancia de IgxCalendarComponent es tan fácil como colocar su elemento selector en la plantilla. Esto mostrará el mes actual en el modo de calendario de selección única.

    <!-- app.component.html -->
<!-- Single selection mode -->
<igx-calendar></igx-calendar>

    Angular Calendar Multiselect

    Podemos cambiar fácilmente el modo predeterminado usando la propiedad selection:

    <!-- app.component.html -->
<!-- Multi selection mode -->
<igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar>

    Angular Calendar Range Picker

    Siguiendo el mismo enfoque, podemos cambiar al modo de selección de rango:

    <!-- app.component.html -->
<!-- Range selection mode -->
<igx-calendar selection="range"></igx-calendar>

    Note

    Observe que el encabezado del calendario no se representa cuando la selección es multi o range.

    Localization and Formatting

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

    Sigamos adelante y probémoslos junto con otras personalizaciones de la IgxCalendarComponent API. Lo primero que debemos configurar es weekStart, que controla el día de inicio de la semana. El valor predeterminado es 0, que corresponde al domingo, por lo que estableceremos un valor de 1 para el lunes. En el marcado a continuación también vinculamos las propiedades formatOptions y formatViews para personalizar el formato de visualización. Finalmente, vinculamos la propiedad locale a un valor, según la elección de ubicación del usuario:

    <!-- app.component.html -->
<igx-select #select [(ngModel)]="locale">
    <igx-select-item *ngFor="let locale of locales" [value]="locale">
        {{ locale }}
    </igx-select-item>
</igx-select>

<igx-calendar #calendar
    [weekStart]="1"
    [locale]="locale"
    [formatOptions]="formatOptions"
    [formatViews]="formatViews">
</igx-calendar>

    Todos los valores de propiedad deben establecerse en el archivo AppCоmponent:

    // app.component.ts
@ViewChild('calendar', { read: IgxCalendarComponent }) public calendar: IgxCalendarComponent;

public formatOptions: any;
public formatViews: any;
public locales = ['EN', 'DE', 'FR', 'AR', 'ZH'];
public locale = 'EN';

public ngOnInit() {
    this.formatOptions = { day: '2-digit', month: 'long', weekday: 'long', year: 'numeric' };
    this.formatViews = { day: true, month: true, year: true };
}

    Si todo salió bien, ahora deberíamos tener un calendario con visualización de fechas personalizadas, que también cambia la representación local, según la ubicación del usuario. Echemos un vistazo:

    How to Disable Dates In Angular Calendar

    Esta sección demuestra el uso de la disabledDates. Para este propósito, se pueden agregar diferentes fechas o rangos únicos a una matriz y luego pasarlos al descriptor disabledDates.

    ​DateRangeType se utiliza para especificar un rango que se deshabilitará.

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

    export class CalendarSample6Component {
    @ViewChild('calendar') public calendar: IgxCalendarComponent;
    public today = new Date(Date.now());
    public range = [
        new Date(this.today.getFullYear(), this.today.getMonth(), 3),
        new Date(this.today.getFullYear(), this.today.getMonth(), 8)
    ];

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

    Estas configuraciones deberían tener el siguiente resultado:

    Special dates

    La función specialDates utiliza casi los mismos principios de configuración disabledDates. La capacidad de seleccionar y enfocar specialDates es lo que los diferencia de los disabled.

    Agreguemos algunas specialDates a nuestro igxCalendar. Para hacer esto, tenemos que crear un elemento DateRangeDescriptor de tipo DateRangeType.Specific y pasar una matriz de fechas como dateRange:

    export class CalendarSample7Component {
    @ViewChild('calendar', { static: true })
    public calendar: IgxCalendarComponent;
    @ViewChild('alert', { static: true })
    public dialog: IgxDialogComponent;
    public range = [];

    public selectPTOdays(dates: Date[]) {
        this.range = dates;
    }

    public submitPTOdays(eventArgs) {
        this.calendar.specialDates =
            [{ type: DateRangeType.Specific, dateRange: this.range }];

        this.range.forEach((item) => {
            this.calendar.selectDate(item);
        });

        ...
    }
}

    <igx-calendar #calendar weekStart="1"
    selection="multi"
    (selected)="selectPTOdays($event)">
</igx-calendar>
<igx-dialog #alert title="Request Time Off"
    leftButtonLabel="OK"
    (leftButtonSelect)="alert.close()">
</igx-dialog>
<button igxButton="contained" (click)="submitPTOdays($event)">Submit Request</button>

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

    Week numbers

    Ahora puede utilizar la entrada showWeekNumbers para mostrar los números de semana para los componentes Calendario y DatePicker.

    
<!-- app.component.html -->
<igx-calendar selection="multi" [showWeekNumbers]="true"></igx-calendar>

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

    Calendar Events

    Exploremos los eventos emitidos por el calendario:

    • selected: emitido al seleccionar fechas en el calendario.
    • viewDateChanged: se emite cada vez que se cambia el mes/año presentado, por ejemplo, después de navegar al mes next o previous.
    • activeViewChanged: se emite después de cambiar la vista activa, por ejemplo, después de que el usuario haya hecho clic en la sección month o year en el encabezado.
    <!-- app.component.html -->
<igx-calendar #calendar
    (selected)="onSelection($event)"
    (viewDateChanged)="viewDateChanged($event)"
    (activeViewChanged)="activeViewChanged($event)">
</igx-calendar>

    El evento selected es adecuado para construir una lógica de validación de entradas. Utilice el código que aparece a continuación para alertar al usuario si la selección supera los 5 días y luego restablezca la selección:

    // app.component.ts
...
public onSelection(dates: Date[]) {
    if (dates.length > 5) {
        this.calendar.selectedDates = [];
        // alert the user
    }
}
public viewDateChanged(event: IViewDateChangeEventArgs) {
    // use event.previousValue to get previous month/year that was presented.
    // use event.currentValue to get current month/year that is presented.
}

public activeViewChanged(event: CalendarView) {
    // use CalendarView[event] to get the current active view (DEFAULT, YEAR or DECADE)
}

    Utilice la siguiente demostración para jugar (cambiar la selección, navegar por meses y años) y ver los eventos registrados en tiempo real:

    Angular Calendar Views

    Hay vistas separadas proporcionadas por IgxCalendarModule que se pueden usar de forma independiente:

    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,​ ​igxCalendarComponent ahora introduce las siguientes tabulaciones:

    • Botón del mes anterior
    • Botón de selección de mes
    • Botón de selección de año
    • Botón del próximo mes
    • Fecha seleccionada, Fecha actual, Primera fecha enfocable (no deshabilitada) en la vista de días

    En un Calendario Angular que contiene más de una fecha seleccionada, solo la primera fecha se introducirá como tabulación. Por ejemplo, cuando una selección múltiple de Calendario Angular está habilitada y ha seleccionado las fechas: 13/10/2020, 17/10/2020 y 21/10/2020, solo se podrá acceder al 13/10/2020 durante la navegación por pestañas; en un selector de rango de calendario Angular, solo la primera fecha del rango seleccionado será parte de la secuencia de pestañas de la página.

    Note

    Cambio de comportamiento, desde v10.2.0: la navegación con la tecla Tab en la vista de días ya no está disponible. Para navegar entre las fechas en la vista de fecha debe utilizar las teclas de flecha.

    Cuando el componente igxCalendar esté enfocado, use:

    • Tecla PageUp para pasar al mes anterior,
    • Tecla PageDown para pasar al mes siguiente,
    • Teclas Shift + PageUp para pasar al año anterior,
    • Teclas Shift + AvPág para pasar al año siguiente,
    • Tecla de inicio para enfocar el primer día del mes actual o el primer mes a la vista
    • Tecla Fin para enfocar el último día del mes actual o el último mes a la vista

    Cuando los botones del mes prev o next (en el subtítulo) estén enfocados, use:

    • Tecla Espacio o Intro para desplazarse y ver el mes anterior o siguiente.

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

    • Tecla Espacio o Intro para abrir la vista de meses.

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

    • Tecla Espacio o Intro para abrir la vista de década.

    Cuando se enfoca un day dentro del mes actual:

    • Utilice las teclas de flecha para navegar por los días. Nota: Se omitirán las fechas deshabilitadas.
    • El foco se mantendrá en el mes actual que está en la vista, mientras se navega desde / hasta el último día / primer día del mes.
    • La navegación de kb sería continua, lo que significa que recorrerá todos los meses mientras se navega con las flechas.
    • Utilice la tecla Intro para seleccionar el día actualmente enfocado.

    Cuando se enfoca un month dentro de la vista de meses, use:

    • Teclas de flecha para navegar por los meses.
    • Tecla de inicio para centrar el primer mes dentro de la vista de meses.
    • Tecla Fin para enfocar el último mes dentro de la vista de meses.
    • Ingrese la clave para seleccionar el mes actualmente enfocado y cerrar la vista.

    Cuando se enfoca un year dentro de la vista de década, use:

    • Teclas de flecha hacia arriba y flecha hacia abajo para navegar a través de los años,
    • Ingrese la clave para seleccionar el año enfocado actualmente y cerrar la vista.
    Note

    A partir de la versión 8.2.0, la navegación con el teclado no se centrará en los días que estén fuera del mes actual, sino que cambiará el mes a la vista.

    Multi View Calendar

    El calendario multivista admite los tres tipos de selección. Utilice la entrada monthsViewNumber para establecer el número de meses mostrados, que se mostrarán horizontalmente en un contenedor flexible. No hay límite en el valor máximo establecido. Al utilizar un calendario de vista múltiple, es posible que desee ocultar los días que no pertenecen al mes actual. Puedes hacerlo con la propiedad hideOutsideDays. La navegación con el teclado pasa a los meses siguientes o anteriores cuando están a la vista.

    Calendar Orientation

    La configuración de orientación permite a los usuarios elegir cómo se muestran el encabezado y la vista del calendario.

    Opciones de orientación del encabezado:

    Puede cambiar la orientación del encabezado para colocar el encabezado del calendario en horizontal (encima de la vista de calendario) o vertical (en el lado de la vista de calendario). Para ello, utilice la [headerOrientation] propiedad, estableciéndola respectivamente en horizontal o vertical

    Ver opciones de orientación:

    Puede establecer la orientación de la vista para colocar los meses en el calendario horizontalmente (uno al lado del otro) o verticalmente (uno encima del otro). Para ello, utilice la [orientation] propiedad, estableciéndola respectivamente en horizontal o vertical.

    Note

    Necesita al menos dos meses de calendario de vista para ver que esa propiedad funciona.

    <igx-calendar [monthsViewNumber]="2" [headerOrientation]="headerOrientation" [orientation]="orientation"></igx-calendar>

    const orientations = ["horizontal", "vertical"] as const;
type Orientation = (typeof orientations)[number];

export class CalendarSample9Component {
    protected orientations = Array.from(orientations, (o) => o);
    protected headerOrientation: Orientation = "horizontal";
    protected orientation: Orientation = "horizontal";

    protected setHeaderOrientation(orientation: Orientation) {
        this.headerOrientation = orientation;
    }

    protected setOrientation(orientation: Orientation) {
        this.orientation = orientation;
    }
}

    Estilismo

    Para comenzar a diseñar el calendario, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el calendar-theme y acepta algunos de los parámetros del tema predeterminado.

    $custom-calendar-theme: calendar-theme(
  $header-background: #345779,
  $content-background: #fdfdfd,
  $header-text-color: #ffffff,
  $date-current-text-color: #2dabe8,
  $picker-arrow-color: #2dabe8,
  $date-selected-text-color: #fdfdfd,
  $date-current-bg-color: #fdfdfd,
  $picker-arrow-hover-color:  #345779,
  $year-current-text-color: #2dabe8,
  $year-hover-text-color: #2dabe8,
  $month-current-text-color: #2dabe8,
  $month-hover-text-color: #2dabe8,
  $picker-text-color: #2dabe8,
  $picker-text-hover-color:  #345779
);

    Using CSS variables

    El último paso es pasar el tema del calendario personalizado:

     @include css-vars($custom-calendar-theme);

    Using Theme Overrides

    Para diseñar componentes para navegadores más antiguos, como Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS.

    Si el componente utiliza Emulated ViewEncapsulation, es necesario penetrate esta encapsulación usando::ng-deep. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir el selector:host antes de::ng-deep:

    :host {
 ::ng-deep {
   @include calendar($custom-calendar-theme);
 }
}

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.