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 importarlosIgxCalendarModule en tu archivo app.module.ts.

    Note

    The IgxCalendarComponent also depends on the BrowserAnimationsModule and optionally the HammerModule for touch interactions, so they need to be added to the AppModule as well:

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

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

    Alternativamente,16.0.0 puedes importarlosIgxCalendarComponent como una dependencia independiente, o usar elIGX_CALENDAR_DIRECTIVES token 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/calendar';
// 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 {}

    Now that you have the Ignite UI for Angular Calendar module or directives imported, you can start using the igx-calendar component.

    Note

    The IgxCalendarComponent uses the Intl Web API for localization and formatting of dates. Consider using appropriate polyfills if your target platform does not support them.

    Using the Angular Calendar

    Angular Single Selection Calendar

    Instantiating the IgxCalendarComponent is as easy as placing its selector element in the template. This will display the current month in the single selection calendar mode.

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

    Angular Calendar Multiselect

    We can easily change the default mode using the selection property:

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

    Notice that the calendar header is not rendered when the selection is either multi or range.

    Localization and Formatting

    Due to their very nature, localization and formatting are essential to any calendar. In the IgxCalendarComponent those are controlled and customized through the following properties - locale, formatOptions, formatViews, weekStart.

    Let's go ahead and try those along with other customizations from the IgxCalendarComponent API. First thing we need to set is the weekStart, which controls the starting day of the week. It defaults to 0, which corresponds to Sunday, so we will set a value of 1 for Monday. In the markup below we are also binding the formatOptions and formatViews properties to customize the display formatting. Finally, we are binding the locale property to a value, based on the user's location choice:

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

    This section demonstrates the usage of disabledDates functionality. For this purpose, different single dates or ranges can be added to an array and then passed to the disabledDates descriptor.

    The DateRangeType is used to specify a range that is going to be disabled.

    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

    The specialDates feature is using almost the same configuration principles as the disabledDates. The ability to select and focus specialDates is what differs them from the disabled ones.

    Let's add some specialDates to our igxCalendar. In order to do this, we have to create a DateRangeDescriptor item of type DateRangeType.Specific and pass an array of dates as a 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

    You can now use showWeekNumbers input to show the week numbers for both Calendar and DatePicker components.

    
<!-- 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 - emitted when selecting date(s) in the calendar.
    • viewDateChanged - emitted every time when the presented month/year is changed - for example after navigating to the next or previous month.
    • activeViewChanged - emitted after the active view is changed - for example after the user has clicked on the month or year section in the header.
    <!-- app.component.html -->
<igx-calendar #calendar
    (selected)="onSelection($event)"
    (viewDateChanged)="viewDateChanged($event)"
    (activeViewChanged)="activeViewChanged($event)">
</igx-calendar>

    The selected event is suitable to build input validation logic. Use the code from below to alert the user if selection exceeds 5 days, and then reset the selection:

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

    There are separate views provided by the IgxCalendarModule that can be used independently:

    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.

    When the igxCalendar component is focused, 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

    When the prev or the next month buttons (in the subheader) are focused, use:

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

    When the months button (in the subheader) is focused, use:

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

    When the year button (in the subheader) is focused, use:

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

    When a day inside the current month is focused:

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

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

    When an year inside the decade view is focused, 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

    Multi-view calendar supports all three types of selection. Use the monthsViewNumber input to set the number of displayed months, which will be shown horizontally in a flex container. There is no limit on the max value set. While using a multi view calendar, you may want to hide the days that do not belong to the current month. You are able to do it with the hideOutsideDays property. Keyboard navigation moves to next/previous months when those are in view.

    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

    You can change the header orientation to place the header of the calendar to be either horizontal(above the calendar view) or vertical(on the side of the calendar view). To do that, use the [headerOrientation] property, setting it respectively to horizontal or vertical

    View Orientation Options

    You can set the view orientation to place the months in the calendar either horizontally(side by side) or vertically(above one another). To do that, use the [orientation] property, setting it respectively to horizontal or 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.

    To get started with styling the calendar, we need to import the index file, where all the theme functions and component mixins live:

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

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

    Following the simplest approach, we create a new theme that extends the calendar-theme and by specifying just the $header-background and $content-background parameters, the theme will automatically compute appropriate state colors and contrast foregrounds. Of course, you're still free to override any of the theme parameters with custom values if needed.

    $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

    Puedes decorarloscalendar usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

    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 tantolight comodark de tema.

    • Usalight-* clases para el tema ligero.
    • Usadark-* 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 dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona 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 asegurar 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.