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

    El IgxCalendarComponent también depende de yBrowserAnimationsModule​ ​opcionalmente elHammerModule para las interacciones táctiles, por lo que también deben añadirse al AppModule:

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

    Ahora que tienes importados el módulo o las directivas de Ignite UI for Angular Calendario, puedes empezar a usar eligx-calendar componente.

    Note

    UtilizaIgxCalendarComponent la API web internacional para la localización y el formato de fechas. Considera usar polifills apropiados si tu plataforma objetivo no los soporta.

    Using the Angular Calendar

    Angular Single Selection Calendar

    Instanciar elIgxCalendarComponent es tan sencillo 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 por defecto usando laselection propiedad:

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

    Observa que el encabezado del calendario no se renderiza cuando la selección es uno omulti otrorange.

    Localization and Formatting

    Debido a su propia naturaleza, la localización y el formato son esenciales en cualquier calendario. En elIgxCalendarComponent de estos se controlan y personalizan mediante las siguientes propiedades -locale,formatOptions,formatViews,.weekStart​

    Vamos a probar eso junto con otras personalizaciones de laIgxCalendarComponent API. Lo primero que tenemos que establecer es elweekStart, que controla el día de inicio de la semana. Por defecto se pone en 0, que corresponde al domingo, así que estableceremos un valor de 1 para el lunes. En el marcado de abajo también estamos asignando lasformatOptions propiedades yformatViews para personalizar el formato de la pantalla. Finalmente, estamos vinculando lalocale propiedad a un valor, basado en 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 AppComponent:

    // 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 ladisabledDates funcionalidad. Para este propósito, se pueden añadir diferentes fechas o rangos individuales a un array y luego pasarse aldisabledDates descriptor.

    SeDateRangeType utiliza para especificar un rango que va a ser deshabilitado.

    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

    LaspecialDates característica utiliza casi los mismos principios de configuración que ladisabledDates. La capacidad de seleccionar y enfocarspecialDates es lo que los diferencia de losdisabled demás.

    Vamos a añadir algospecialDates a la nuestraigxCalendar. Para ello, tenemos que crear unDateRangeDescriptor elemento de tipoDateRangeType.Specific y pasar un array 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 puedes usarshowWeekNumbers la entrada para mostrar los números de semana tanto de los componentes de Calendar como de DateSelecter.

    
<!-- 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- emitida al seleccionar fecha(s) en el calendario.
    • viewDateChanged- emitida cada vez que se cambia el mes/año presentado, por ejemplo, tras navegar alnext mes de oprevious.
    • activeViewChanged- emitidos después de cambiar la vista activa, por ejemplo, después de que el usuario haya hecho clic en lamonth sección oyear del encabezado.
    <!-- app.component.html -->
<igx-calendar #calendar
    (selected)="onSelection($event)"
    (viewDateChanged)="viewDateChanged($event)"
    (activeViewChanged)="activeViewChanged($event)">
</igx-calendar>

    Elselected evento es adecuado para construir lógica de validación de entrada. Utiliza el código de abajo para avisar al usuario si la selección supera los 5 días, y luego reinicia 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

    Existen vistas separadas proporcionadas por elIgxCalendarModule que pueden usarse 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 eligxCalendar componente está enfocado, utiliza:

    • 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 losprev botones o elnext mes (en el subtítulo) estén enfocados, usa:

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

    Cuando elmonths botón (en el subencabezado) esté enfocado, usa:

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

    Cuando elyear botón (en el subencabezado) esté enfocado, usa:

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

    Cuando se centra en elday 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 centra en unamonth vista del mes interior, usa:

    • 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 enfoque unayear visión dentro de la década, utiliza:

    • 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. Utiliza lamonthsViewNumber entrada para establecer el número de meses mostrados, que se mostrará horizontalmente en un contenedor flexible. No hay límite en el conjunto máximo de valores. Al usar un calendario de varias vistas, puede que quieras ocultar los días que no pertenecen al mes actual. Puedes hacerlo desde lahideOutsideDays propiedad. La navegación con teclado se mueve a los meses siguientes/anteriores cuando esos 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

    Puedes cambiar la orientación del encabezado para colocar el encabezado del calendario en horizontal (por encima de la vista del calendario) o vertical (en el lateral de la vista del calendario). Para ello, utiliza la[headerOrientation] propiedad, configurándola respectivamente comohorizontal overtical

    View Orientation Options

    Puedes configurar la orientación de la vista para colocar los meses en el calendario ya sea horizontalmente (lado a lado) o verticalmente (uno encima del otro). Para ello, usa la[orientation] propiedad, configurándola respectivamente comohorizontal overtical.

    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

    Cuando modificas las$header-background propiedades de and$content-background, todas las propiedades relacionadas del tema se ajustan automáticamente para asegurar que tu componente de calendario tenga un estilo consistente. Consulta las tablas a continuación para una visión detallada de qué propiedades de los temas se ven afectadas.

    Propiedad principal Propiedad dependiente Descripción
    $header-antecedentes
    		 $header primer plano Color de texto para la cabecera del calendario
    $picker-primer plano flotantePrimer plano flotador del selector
    $picker-foco en primer planoEnfoque del selector en primer plano
    $navigation-hover-colorColor de estacionario para navegación
    $navigation-focalización-colorColor de enfoque para la navegación
    $date-seleccionado-fondoAntecedentes de las fechas seleccionadas
    $date-seleccionado-actual-fondoAntecedentes seleccionados de la fecha actual
    $date-primer plano seleccionadoPrimer plano para fechas seleccionadas
    $date-corriente-seleccionado-primer planoPrimer plano para la fecha actual seleccionada
    $date-color-actual-actual-seleccionadoColor del borde para la fecha actual seleccionada
    $date-selecto-especial-color-borde-Color del borde para fechas especiales seleccionadas
    $ym-antecedentes seleccionadosAntecedentes seleccionados de año/mes
    $ym-seleccionado-pasar-de-fondoPasa el cursor al fondo para la fecha seleccionada del año/mes
    $ym-seleccionado-actual-fondoAntecedentes actuales de año/mes seleccionados
    $ym-seleccionado-actual-hover-fondoPasa el cursor para el año/mes seleccionado actual
    $ym-seleccionado-primer planoPrimer plano para un año/mes seleccionado
    $ym-seleccionado-flotar-en primer planoFlota en primer plano para el año/mes seleccionado
    $ym-corriente-seleccionado-primer planoPrimer plano para el año/mes seleccionado actual
    $ym-corriente-seleccionado-planeo-primer planoPaso el cursor en primer plano para el año/mes seleccionado actual
    $content-antecedentes
    		 $content primer plano Color de texto e iconos dentro del área de contenido del calendario
    $weekend-colorColor para las citas de fin de semana
    $inactive-colorColorea para fechas fuera del rango activo
    $weekday colorColor para etiquetas entre semana
    $picker AntecedentesAntecedentes del selector
    $date-hover-backgroundContexto sobre las fechas suspendidas
    $date-primer plano flotantePrimer plano para fechas suspendidas
    $date-enfoque de fondoContexto para las citas específicas
    $date-foco en primer planoPrimer plano para fechas concretas
    $date-actualidad-antecedentesAntecedentes para la fecha actual
    $date-corriente-primer planoPrimer plano para la fecha actual
    $date-corriente-borde-colorColor del borde para la fecha actual
    $ym-actualidad-antecedentesAntecedentes actuales de año/mes
    $ym-corriente-hover-fondoPasa el cursor al fondo del año/mes actual
    $ym-corriente-primer planoPrimer plano para el año/mes actual
    $ym-corriente-en primer planoPasar el cursor en primer plano para el año/mes actual
    $date-rango-seleccionado-fondoAntecedentes seleccionados de la zona de distribución
    $date-rango-seleccionado-primer planoPrimer plano para rangos de fechas seleccionados
    $date-actual-rango-fondo seleccionadoAntecedentes para los rangos de fechas actuales seleccionados
    $date-corriente-selectado-rango-flotación-fondoColoca el cursor en el fondo para los rangos de fechas actuales seleccionados
    $date-rango-corriente-campo-enfoque-fondoFondo de enfoque para rangos de fechas actuales seleccionados
    $date-corriente-rango-delante-primer planoPrimer plano para rangos de fechas actuales seleccionados
    $date-especial en primer planoPrimer plano para fechas especiales
    $date-color-borde-especialColor del borde para fechas especiales
    $date-color-borde-flotante especialColor de borde de hover para fechas especiales
    $date-enfoque especial en primer planoCentra el primer plano para las fechas especiales
    $date-especial-rango-primer planoPrimer plano para intervalos de fechas especiales
    $date-especial-rango-borde-colorColor del borde para rangos de fechas especiales
    $date-especial-alcance-hover-fondoPasa el cursor por el fondo para intervalos de fechas especiales
    $date-selecto-especial-color-borde-Color del borde para fechas especiales seleccionadas
    $date-selecto-especial-flotar-color-borde-Haz pasar el color del borde para fechas especiales seleccionadas
    $date-enfoque-especial-selecto-borde-colorEnfoque del color del borde para fechas especiales seleccionadas
    $date-desactivado-primer planoPrimer plano para fechas para discapacitados
    $date-desactivado-rango-primer planoPrimer plano para campos de tiro para discapacitados
    $date-radio de frontera
    		 $date-rango-radio-borde Controla el radio de frontera para los intervalos de fechas.
    $date-corriente-radio-bordeControla el radio de la frontera para la fecha actual.
    $date-radio-especial-frontera-Controla el radio de la frontera para fechas especiales.
    $date-radio de fronteraSi no se especifica y$date-range-border-radius está establecida, utiliza el valor de$date-range-border-radius.
    Propiedad principal Propiedad dependiente Descripción
    $header-antecedentes
    		 $header primer plano Color de texto para la cabecera del calendario
    $picker-primer plano flotantePrimer plano flotador del selector
    $picker-foco en primer planoEnfoque del selector en primer plano
    $date-actualidad-antecedentesAntecedentes para la fecha actual
    $date-corriente-planeo-primer planoPasar el cursor en primer plano para la fecha actual
    $date-corriente-enfoque-primer planoEnfoque en primer plano para la fecha actual
    $date-corriente-seleccionado-primer planoPrimer plano para la fecha seleccionada actualmente
    $date-corriente-seleccionado-planeo-primer planoPasar el cursor en primer plano para la fecha seleccionada actualmente
    $date-corriente-seleccionado-enfoque-primer planoEnfoque en primer plano para la fecha seleccionada actualmente
    $date-color-borde-especialColor del borde para fechas especiales
    $date-especial en primer plano flotadorFlota en primer plano para fechas especiales
    $content-antecedentes
    		 $content primer plano Color de texto e iconos dentro del área de contenido del calendario
    $weekend-colorColor para las citas de fin de semana
    $inactive-colorColorea para fechas fuera del rango activo
    $weekday colorColor para etiquetas entre semana
    $picker AntecedentesAntecedentes del selector
    $date-hover-backgroundContexto sobre las fechas suspendidas
    $date-primer plano flotantePrimer plano para fechas suspendidas
    $date-enfoque de fondoContexto para las citas específicas
    $date-foco en primer planoPrimer plano para fechas concretas
    $date-seleccionado-fondoAntecedentes de las fechas seleccionadas
    $date-hover-screen-background seleccionadoPasa el cursor para las fechas seleccionadas
    $date-enfoque-seleccionado-fondoContexto de enfoque para fechas seleccionadas
    $date-primer plano seleccionadoPrimer plano para fechas seleccionadas
    $date-seleccionado-hover-primer planoPermanece en primer plano para fechas seleccionadas
    $date-enfoque-seleccionado-primer planoEnfoque en primer plano para fechas seleccionadas
    $date-rango-seleccionado-fondoAntecedentes para los rangos de fechas seleccionados
    $date-rango-seleccionado-primer planoPrimer plano para rangos de fechas seleccionados
    $date-desactivado-primer planoPrimer plano para fechas para discapacitados
    $date-desactivado-rango-primer planoPrimer plano para campos de tiro para discapacitados
    $date-radio de frontera
    		 $date-rango-radio-borde Controla el radio de frontera para los intervalos de fechas.
    $date-corriente-radio-bordeControla el radio de la frontera para la fecha actual.
    $date-radio-especial-frontera-Controla el radio de la frontera para fechas especiales.
    $date-radio de fronteraSi no se especifica y$date-range-border-radius está establecida, utiliza el valor de$date-range-border-radius.
    Propiedad principal Propiedad dependiente Descripción
    $header-antecedentes
    		 $header primer plano Color de texto para la cabecera del calendario
    $picker AntecedentesAntecedentes del selector
    $picker-primer plano flotantePrimer plano flotador del selector
    $weekday colorColor para etiquetas entre semana
    $picker-foco en primer planoEnfoque del selector en primer plano
    $date-color-borde-especialColor del borde para fechas especiales
    $date-enfoque especial en primer planoCentra el primer plano para las fechas especiales
    $content-antecedentes
    		 $content primer plano Color de texto e iconos dentro del área de contenido del calendario
    $weekend-colorColor para las citas de fin de semana
    $inactive-colorColorea para fechas fuera del rango activo
    $weekday colorColor para etiquetas entre semana
    $date-hover-backgroundContexto sobre las fechas suspendidas
    $date-primer plano flotantePrimer plano para fechas suspendidas
    $date-enfoque de fondoContexto para las citas específicas
    $date-foco en primer planoPrimer plano para fechas concretas
    $date-actualidad-antecedentesAntecedentes para la fecha actual
    $date-corriente-primer planoPrimer plano para la fecha actual
    $date-corriente-borde-colorColor del borde para la fecha actual
    $date-seleccionado-fondoAntecedentes de las fechas seleccionadas
    $date-seleccionado-actual-fondoAntecedentes de la fecha seleccionada actualmente
    $date-primer plano seleccionadoPrimer plano para fechas seleccionadas
    $date-corriente-seleccionado-primer planoPrimer plano para la fecha seleccionada actualmente
    $date-selecto-especial-color-borde-Color del borde para fechas especiales seleccionadas
    $date-selecto-especial-flotar-color-borde-Haz pasar el color del borde para fechas especiales seleccionadas
    $date-enfoque-especial-selecto-borde-colorEnfoque del color del borde para fechas especiales seleccionadas
    $date-rango-seleccionado-fondoAntecedentes para los rangos de fechas seleccionados
    $date-rango-seleccionado-primer planoPrimer plano para rangos de fechas seleccionados
    $date-desactivado-primer planoPrimer plano para fechas para discapacitados
    $date-desactivado-rango-primer planoPrimer plano para campos de tiro para discapacitados
    $date-radio de frontera
    		 $date-rango-radio-borde Controla el radio de frontera para los intervalos de fechas.
    $date-corriente-radio-bordeControla el radio de la frontera para la fecha actual.
    $date-radio-especial-frontera-Controla el radio de la frontera para fechas especiales.
    $date-radio de fronteraSi no se especifica y$date-range-border-radius está establecida, utiliza el valor de$date-range-border-radius.
    Propiedad principal Propiedad dependiente Descripción
    $header-antecedentes
    		 $header primer plano Color de texto para la cabecera del calendario
    $picker AntecedentesAntecedentes del selector
    $picker-primer plano flotantePrimer plano flotador del selector
    $picker-foco en primer planoEnfoque del selector en primer plano
    $navigation-hover-colorColor del estacionario de navegación
    $navigation-focalización-colorColor del enfoque de navegación
    $date-actualidad-antecedentesAntecedentes para la fecha actual
    $date-corriente-borde-colorColor del borde para la fecha actual
    $date-corriente-hover-fondoAntecedentes de la fecha actual con el cursor
    $date-corriente-borde-color del borde flotanteColor del borde para la fecha actual flotada
    $date-enfoque-actual-fondoAntecedentes para la fecha actual enfocada
    $date-enfoque-actual-borde-colorColor del borde para la fecha actual enfocada
    $date-corriente-primer planoPrimer plano para la fecha actual
    $date-corriente-planeo-primer planoPrimer plano para la fecha actual suspendida
    $date-corriente-enfoque-primer planoPrimer plano para la fecha actual enfocada
    $date-color-actual-actual-seleccionadoColor del borde para la fecha seleccionada actualmente
    $content-antecedentes
    		 $content primer plano Color de texto e iconos dentro del área de contenido del calendario
    $weekend-colorColor para las citas de fin de semana
    $inactive-colorColorea para fechas fuera del rango activo
    $weekday colorColor para etiquetas entre semana
    $date-hover-backgroundContexto sobre las fechas suspendidas
    $date-primer plano flotantePrimer plano para fechas suspendidas
    $date-enfoque de fondoContexto para las citas específicas
    $date-foco en primer planoPrimer plano para fechas concretas
    $date-seleccionado-fondoAntecedentes de las fechas seleccionadas
    $date-seleccionado-actual-fondoAntecedentes de la fecha seleccionada actualmente
    $date-primer plano seleccionadoPrimer plano para fechas seleccionadas
    $date-corriente-seleccionado-primer planoPrimer plano para la fecha seleccionada actualmente
    $date-color-actual-actual-seleccionadoColor del borde para la fecha seleccionada actualmente
    $date-rango-seleccionado-fondoAntecedentes para los rangos de fechas seleccionados
    $date-rango-seleccionado-primer planoPrimer plano para rangos de fechas seleccionados
    $date-actual-rango-fondo seleccionadoAntecedentes para la fecha actual en un rango seleccionado
    $date-corriente-selectado-rango-flotación-fondoPasa el cursor al fondo de la fecha actual en un rango seleccionado
    $date-corriente-rango-delante-primer planoPrimer plano para la fecha actual en un rango seleccionado
    $date-desactivado-primer planoPrimer plano para fechas para discapacitados
    $date-desactivado-rango-primer planoPrimer plano para campos de tiro para discapacitados
    $date-radio de frontera
    		 $date-rango-radio-borde Controla el radio de frontera para los intervalos de fechas.
    $date-corriente-radio-bordeControla el radio de la frontera para la fecha actual.
    $date-radio-especial-frontera-Controla el radio de la frontera para fechas especiales.
    $date-radio de fronteraSi no se especifica y$date-range-border-radius está establecida, utiliza el valor de$date-range-border-radius.

    Para empezar a estilizar el calendario, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:

    @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 sencillo, creamos un nuevo tema que extiende elcalendar-theme y, especificando solo los$header-background parámetros y$content-background, el tema calculará automáticamente los colores de estado apropiados y los primeros planos de contraste. Por supuesto, sigues siendo libre de sobreescribir cualquier parámetro 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

    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.

    Al final tu calendario debería verse así:

    API References

    Additional Resources

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