Descripción general del componente Calendario Angular

    Angular Calendar es un componente de 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 funciones del calendario, arrastrar y crear eventos en un calendario, navegar hasta una fecha preferida y mostrar eventos en una vista de mes, semana o día del calendario Angular con un solo clic.

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

    Angular Ejemplo de calendario

    Hemos creado el siguiente ejemplo de calendario Angular utilizando el paquete 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 sola fecha, y cómo avanzar y retroceder a una fecha específica.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Primeros pasos con Ignite UI for Angular Calendario

    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
cmd

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

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

    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 {}
typescript

    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 {}
typescript

    Ahora que tiene el módulo o las directivas Ignite UI for Angular Calendario importado, puede comenzar a usar el igx-calendar componente.

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

    Uso del calendario Angular

    Angular Calendario de selección única

    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>
html

    Angular Selección múltiple de calendario

    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>
html

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Angular Selector de rango de calendario

    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>
html

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    Localización y formato

    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>
html

    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 };
}
typescript

    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:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Cómo desactivar las fechas en Angular calendario

    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 }];
    }
}
typescript

    Estas configuraciones deberían tener el siguiente resultado:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    fechas especiales

    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);
        });

        ...
    }
}
typescript
    <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>
html

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Números de semana

    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>
html

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Eventos del calendario

    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>
html

    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)
}
typescript

    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:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    App Builder | CTA Banner

    Angular Vistas de calendario

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Navegación por teclado

    Si recorres la página con la tecla Tab, debes tener en cuenta que, en función de las recomendaciones de accesibilidad de W3, igxCalendarComponent ahora presenta 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 contenga más de una fecha seleccionada, solo se introducirá la primera fecha como tabulación. Por ejemplo, cuando una selección múltiple de Calendario de Angular está habilitada y ha seleccionado las fechas: 13/10/2020,17​ ​/10/2020 y 21/10/2020, solo se podrá acceder a 13/10/2020 durante la navegación por pestañas; en un selector de intervalo de calendario Angular, solo la primera fecha del intervalo seleccionado formará parte de la secuencia de pestañas de la página.

    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.

    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.

    Calendario de vista múltiple

    El calendario multivista admite los tres tipos de selección. Utilice la monthsViewNumber entrada 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 varias vistas, es posible que desee ocultar los días que no pertenecen al mes actual. Usted es capaz de hacerlo con la hideOutsideDays propiedad. La navegación con el teclado se mueve a los meses siguientes o anteriores cuando estos están a la vista.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Orientación del calendario

    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.

    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>
html
    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;
    }
}
typescript

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Estilo

    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';
scss

    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-foreground: #ffffff,
  $date-current-foreground: #2dabe8,
  $navigation-color: #2dabe8,
  $date-selected-foreground: #fdfdfd,
  $date-current-background: #fdfdfd,
  $navigation-hover-color: #345779,
  $ym-current-foreground: #2dabe8,
  $ym-hover-foreground: #2dabe8,
  $picker-foreground: #2dabe8,
  $picker-hover-foreground: #345779,
);
scss

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

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Referencias de API

    Recursos adicionales

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