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 Calendar Example

    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.

    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 al 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 tiene el módulo o las directivas Ignite UI for Angular Calendario importado, puede comenzar a usar el igx-calendar componente.

    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>

    All property values should be set in the AppComponent file:

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

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

    Calendar Orientation

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

    Header Orientation Options

    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

    View Orientation Options

    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

    Calendar Theme Property Map

    When you modify the $header-background and $content-background properties, all related theme properties are automatically adjusted to ensure your calendar component is styled consistently. See the tables below for a detailed overview of which theme properties are affected.

    Propiedad principal Propiedad dependiente Descripción
    $header-antecedentes
    		 $header primer plano Text color for the calendar header
    $picker-hover-foregroundPicker hover foreground
    $picker-focus-foregroundPicker focus foreground
    $navigation-hover-colorHover color for navigation
    $navigation-focus-colorFocus color for navigation
    $date-selected-backgroundBackground for selected dates
    $date-selected-current-backgroundSelected current date background
    $date-selected-foregroundForeground for selected dates
    $date-selected-current-foregroundForeground for selected current date
    $date-selected-current-border-colorBorder color for selected current date
    $date-selected-special-border-colorBorder color for selected special dates
    $ym-selected-backgroundYear/month selected background
    $ym-selected-hover-backgroundHover background for year/month selected date
    $ym-selected-current-backgroundCurrent selected year/month background
    $ym-selected-current-hover-backgroundHover background for current selected year/month
    $ym-selected-foregroundForeground for selected year/month
    $ym-selected-hover-foregroundHover foreground for selected year/month
    $ym-selected-current-foregroundForeground for current selected year/month
    $ym-selected-current-hover-foregroundHover foreground for current selected year/month
    $content-background
    		 $content-foreground Text and icon color inside calendar content area
    $weekend-colorColor for weekend dates
    $inactive-colorColor for dates outside active range
    $weekday-colorColor for weekday labels
    $picker-backgroundPicker background
    $date-hover-backgroundBackground for hovered dates
    $date-hover-foregroundForeground for hovered dates
    $date-focus-backgroundBackground for focused dates
    $date-focus-foregroundForeground for focused dates
    $date-current-backgroundBackground for the current date
    $date-current-foregroundForeground for the current date
    $date-current-border-colorBorder color for the current date
    $ym-current-backgroundYear/month current background
    $ym-current-hover-backgroundHover background for current year/month
    $ym-current-foregroundForeground for current year/month
    $ym-current-hover-foregroundHover foreground for current year/month
    $date-selected-range-backgroundSelected range background
    $date-selected-range-foregroundForeground for selected date ranges
    $date-selected-current-range-backgroundBackground for selected current date ranges
    $date-selected-current-range-hover-backgroundHover background for selected current date ranges
    $date-selected-current-range-focus-backgroundFocus background for selected current date ranges
    $date-selected-current-range-foregroundForeground for selected current date ranges
    $date-special-foregroundForeground for special dates
    $date-special-border-colorBorder color for special dates
    $date-special-hover-border-colorHover border color for special dates
    $date-special-focus-foregroundFocus foreground for special dates
    $date-special-range-foregroundForeground for special date ranges
    $date-special-range-border-colorBorder color for special date ranges
    $date-special-range-hover-backgroundHover background for special date ranges
    $date-selected-special-border-colorBorder color for selected special dates
    $date-selected-special-hover-border-colorHover border color for selected special dates
    $date-selected-special-focus-border-colorFocus border color for selected special dates
    $date-disabled-foregroundForeground for disabled dates
    $date-disabled-range-foregroundForeground for disabled ranges
    $date-border-radius
    		 $date-range-border-radius Controls the border radius for date ranges.
    $date-current-border-radiusControls the border radius for the current date.
    $date-special-border-radiusControls the border radius for special dates.
    $date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
    Propiedad principal Propiedad dependiente Descripción
    $header-antecedentes
    		 $header primer plano Text color for the calendar header
    $picker-hover-foregroundPicker hover foreground
    $picker-focus-foregroundPicker focus foreground
    $date-current-backgroundBackground for the current date
    $date-current-hover-foregroundHover foreground for the current date
    $date-current-focus-foregroundFocus foreground for the current date
    $date-selected-current-foregroundForeground for the currently selected date
    $date-selected-current-hover-foregroundHover foreground for the currently selected date
    $date-selected-current-focus-foregroundFocus foreground for the currently selected date
    $date-special-border-colorBorder color for special dates
    $date-special-hover-foregroundHover foreground for special dates
    $content-background
    		 $content-foreground Text and icon color inside calendar content area
    $weekend-colorColor for weekend dates
    $inactive-colorColor for dates outside active range
    $weekday-colorColor for weekday labels
    $picker-backgroundPicker background
    $date-hover-backgroundBackground for hovered dates
    $date-hover-foregroundForeground for hovered dates
    $date-focus-backgroundBackground for focused dates
    $date-focus-foregroundForeground for focused dates
    $date-selected-backgroundBackground for selected dates
    $date-selected-hover-backgroundHover background for selected dates
    $date-selected-focus-backgroundFocus background for selected dates
    $date-selected-foregroundForeground for selected dates
    $date-selected-hover-foregroundHover foreground for selected dates
    $date-selected-focus-foregroundFocus foreground for selected dates
    $date-selected-range-backgroundBackground for selected date ranges
    $date-selected-range-foregroundForeground for selected date ranges
    $date-disabled-foregroundForeground for disabled dates
    $date-disabled-range-foregroundForeground for disabled ranges
    $date-border-radius
    		 $date-range-border-radius Controls the border radius for date ranges.
    $date-current-border-radiusControls the border radius for the current date.
    $date-special-border-radiusControls the border radius for special dates.
    $date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
    Propiedad principal Propiedad dependiente Descripción
    $header-antecedentes
    		 $header primer plano Text color for the calendar header
    $picker-backgroundPicker background
    $picker-hover-foregroundPicker hover foreground
    $weekday-colorColor for weekday labels
    $picker-focus-foregroundPicker focus foreground
    $date-special-border-colorBorder color for special dates
    $date-special-focus-foregroundFocus foreground for special dates
    $content-background
    		 $content-foreground Text and icon color inside calendar content area
    $weekend-colorColor for weekend dates
    $inactive-colorColor for dates outside active range
    $weekday-colorColor for weekday labels
    $date-hover-backgroundBackground for hovered dates
    $date-hover-foregroundForeground for hovered dates
    $date-focus-backgroundBackground for focused dates
    $date-focus-foregroundForeground for focused dates
    $date-current-backgroundBackground for the current date
    $date-current-foregroundForeground for the current date
    $date-current-border-colorBorder color for the current date
    $date-selected-backgroundBackground for selected dates
    $date-selected-current-backgroundBackground for the currently selected date
    $date-selected-foregroundForeground for selected dates
    $date-selected-current-foregroundForeground for the currently selected date
    $date-selected-special-border-colorBorder color for selected special dates
    $date-selected-special-hover-border-colorHover border color for selected special dates
    $date-selected-special-focus-border-colorFocus border color for selected special dates
    $date-selected-range-backgroundBackground for selected date ranges
    $date-selected-range-foregroundForeground for selected date ranges
    $date-disabled-foregroundForeground for disabled dates
    $date-disabled-range-foregroundForeground for disabled ranges
    $date-border-radius
    		 $date-range-border-radius Controls the border radius for date ranges.
    $date-current-border-radiusControls the border radius for the current date.
    $date-special-border-radiusControls the border radius for special dates.
    $date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
    Propiedad principal Propiedad dependiente Descripción
    $header-antecedentes
    		 $header primer plano Text color for the calendar header
    $picker-backgroundPicker background
    $picker-hover-foregroundPicker hover foreground
    $picker-focus-foregroundPicker focus foreground
    $navigation-hover-colorNavigation hover color
    $navigation-focus-colorNavigation focus color
    $date-current-backgroundBackground for the current date
    $date-current-border-colorBorder color for the current date
    $date-current-hover-backgroundBackground for hovered current date
    $date-current-hover-border-colorBorder color for hovered current date
    $date-current-focus-backgroundBackground for focused current date
    $date-current-focus-border-colorBorder color for focused current date
    $date-current-foregroundForeground for the current date
    $date-current-hover-foregroundForeground for hovered current date
    $date-current-focus-foregroundForeground for focused current date
    $date-selected-current-border-colorBorder color for the currently selected date
    $content-background
    		 $content-foreground Text and icon color inside calendar content area
    $weekend-colorColor for weekend dates
    $inactive-colorColor for dates outside active range
    $weekday-colorColor for weekday labels
    $date-hover-backgroundBackground for hovered dates
    $date-hover-foregroundForeground for hovered dates
    $date-focus-backgroundBackground for focused dates
    $date-focus-foregroundForeground for focused dates
    $date-selected-backgroundBackground for selected dates
    $date-selected-current-backgroundBackground for the currently selected date
    $date-selected-foregroundForeground for selected dates
    $date-selected-current-foregroundForeground for the currently selected date
    $date-selected-current-border-colorBorder color for the currently selected date
    $date-selected-range-backgroundBackground for selected date ranges
    $date-selected-range-foregroundForeground for selected date ranges
    $date-selected-current-range-backgroundBackground for the current date in a selected range
    $date-selected-current-range-hover-backgroundHover background for the current date in a selected range
    $date-selected-current-range-foregroundForeground for the current date in a selected range
    $date-disabled-foregroundForeground for disabled dates
    $date-disabled-range-foregroundForeground for disabled ranges
    $date-border-radius
    		 $date-range-border-radius Controls the border radius for date ranges.
    $date-current-border-radiusControls the border radius for the current date.
    $date-special-border-radiusControls the border radius for special dates.
    $date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.

    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 al especificar solo los parámetros y $content-background, el tema calculará automáticamente los $header-background colores de estado apropiados y contrastará los primeros planos. Por supuesto, aún puede anular cualquiera de los parámetros del tema con valores personalizados si es necesario.

    $custom-calendar-theme: calendar-theme(
  $header-background: #ecaa53,
  $content-background: #011627,
);

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

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

    Styling with Tailwind

    You can style the calendar using our custom Tailwind utility classes. Make sure to set up Tailwind first.

    Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    El archivo de utilidad incluye variantes de light ambos temas dark.

    • Usa light-* clases para el tema de la luz.
    • Usa dark-* clases para el tema oscuro.
    • Añadir el nombre del componente después del prefijo, por ejemplo, , light-calendar, dark-calendar.

    Una vez aplicadas, estas clases permiten cálculos de temas dinámicos. A partir de ahí, puede anular las variables CSS generadas usando arbitrary properties. Después de los dos puntos, proporcione cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

    Puedes encontrar la lista completa de propiedades en el tema del calendario. La sintaxis es la siguiente:

    <igx-calendar
class="!light-calendar
![--header-background:#4F6A5A]
![--content-background:#A3C7B2]"
[weekStart]="1">
</igx-calendar>
    Note

    El signo de exclamación (!) es necesario para garantizar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

    At the end your calendar should look like this:

    API References

    Additional Resources

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