Descripción general del calendario Blazor

El componente Ignite UI for Blazor Calendar es liviano y fácil de configurar. Se utiliza para mostrar fechas y días de la semana. También es la mejor manera de proporcionar vistas mensuales o anuales a los usuarios finales. El control Ignite UI for Blazor Calendar le permite restringir los rangos de fechas mínimos y máximos por los que las personas pueden navegar.

La Ignite UI Ignite UI for Blazor Calendar ofrece una forma sencilla e intuitiva de mostrar información sobre fechas. Incluye distintas funciones, como modos de selección de una o varias fechas, resaltar y seleccionar un rango de fechas, navegación con teclado, habilitación de números de semana, opciones de tamaño y espaciado, y más.

Blazor Calendar Example

En el siguiente ejemplo de componente Blazor IgbCalendar se muestra un calendario básico con un modo de selección de un solo día. Vea cómo funciona o inspeccione el código que hay detrás.

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbCalendarModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div style="width: 25rem; border: 1px solid gainsboro;">
        <IgbCalendar />
    </div>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

How To Create a Calendar in Blazor with Ignite UI

Antes de utilizar IgbCalendar, debe registrarlo de la siguiente manera:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule));
razor

También deberá vincular un archivo CSS adicional para aplicar el estilo al componente Ignite UI for Blazor IgbCalendar. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor

Para obtener una introducción completa a la Ignite UI for Blazor, lea el tema Primeros pasos.

La forma más sencilla de empezar a utilizar el Ignite UI for Blazor IgbCalendar es la siguiente:

<IgbCalendar />
razor

Selection Modes

Los usuarios pueden elegir entre tres modos de selección diferentes: selección única, selección múltiple o selección de rango. De forma predeterminada, el Ignite UI for Blazor IgbCalendar utiliza el modo de selección única, pero puede cambiarlo estableciendo la Selection propiedad como se muestra en este ejemplo.

<IgbCalendar Selection="@CalendarBaseSelection.Multiple" />
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbCalendarModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div style="width: 25rem; border: 1px solid gainsboro;">
        <IgbCalendar Selection="@CalendarBaseSelection.Multiple"/>
    </div>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Range Selection

Siguiendo el mismo enfoque, podemos cambiar Selection al modo de rango:

<IgbCalendar Selection="@CalendarBaseSelection.Range" />
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbCalendarModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div style="width: 25rem; border: 1px solid gainsboro;">
        <IgbCalendar Selection="@CalendarBaseSelection.Range" />
    </div>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Active View and Date

El componente Calendario Ignite UI for Blazor le permite cambiar entre tres vistas diferentes: días, meses y años. La ActiveView propiedad del componente refleja la vista actual. De forma predeterminada, el calendario muestra la fecha actual cuando se carga inicialmente. Puede modificar esto estableciendo la ActiveDate propiedad. La ActiveDate propiedad también refleja los cambios de la fecha actualmente visible realizados por el usuario final.

Week numbers

Puede utilizar la propiedad ShowWeekNumbers para mostrar los números de semana del componente Calendario. Puedes hacer esto usando su atributo booleano correspondiente show-week-numbers como este:

<IgbCalendar ShowWeekNumbers="true" />
razor

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbCalendarModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div style="width: 400px; border: 1px solid gainsboro;">
        <IgbCalendar ShowWeekNumbers="true"></IgbCalendar>
    </div>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Multiple Months

Con la propiedad VisibleMonths, puede mostrar más de un mes cuando el Calendario está en vista days. Cuando se muestran varios meses, puede configurar si desea apilarlos vertical u horizontalmente utilizando la propiedad Orientation. De forma predeterminada, la propiedad Orientation está establecida en horizontal.

El Calendario muestra las fechas iniciales y finales del mes anterior y siguiente. Puede ocultar estas fechas estableciendo la propiedad HideOutsideDays en verdadero o usando su atributo booleano correspondiente HideOutsideDays.

<IgbCalendar VisibleMonths="2" HideOutsideDays="true" />
razor

El siguiente ejemplo demuestra la configuración de varios meses:

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbCalendarModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div style="width: 37.5rem; border: 1px solid gainsboro;">
        <IgbCalendar VisibleMonths="2" HideOutsideDays="true"/>
    </div>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Tamaño

Puede controlar el tamaño y el espaciado de los elementos internos del calendario utilizando la variable CSS--ig-size. El tamaño predeterminado del componente es grande.

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbCalendarModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}
</style>
<div class="container vertical">
    <IgbRadioGroup Alignment="@RadioGroupAlignment.Horizontal">
        <IgbRadio name="size" Value="Small" label-position="after" Change="OnRadioOptionClick">Small</IgbRadio>
        <IgbRadio name="size" Value="Medium" label-position="after" Checked="true" Change="OnRadioOptionClick">Medium</IgbRadio>
        <IgbRadio name="size" Value="Large" label-position="after" Change="OnRadioOptionClick">Large</IgbRadio>
    </IgbRadioGroup>

    <div style="width: 25rem; border: 1px solid gainsboro;">
        <IgbCalendar class="@CalendarSize"/>
    </div>
</div>

@code {
    
    private string CalendarSize = "size-medium";

    public void OnRadioOptionClick(IgbRadioChangeEventArgs e)
    {
        this.CalendarSize = $"size-{e.Detail.Value.ToLower()}";
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.size-small {
    --ig-size: var(--ig-size-small);
}

.size-medium {
    --ig-size: var(--ig-size-medium);
}

.size-large {
    --ig-size: var(--ig-size-large);
}cssコピー

Eventos

El componente Calendario emite el evento Change cuando el usuario final cambia las fechas seleccionadas. Puedes suscribirte al evento así:

<IgbCalendar Change="@OnCalendarChange" />

@code {
    public void OnCalendarChange(IgbComponentDataValueChangedEventArgs args)
    {

    }
}
razor

Navegación por teclado

Si recorre la página usando la tecla Tab, debe tener en cuenta que, según las recomendaciones de accesibilidad de W3,​ ​IgbCalendar presenta las siguientes tabulaciones:

• Botón de selección de mes
• Botón de selección de año
• Botón anterior
• Siguiente botón
• Elemento de fecha activo

Cuando se enfoca un día/mes/año en el componente IgbCalendar, use:

• Tecla Re Pág para pasar a la página del mes/año/año anterior.
• Tecla AvPág para pasar a la página del mes/año/año siguiente.
• Tecla de inicio para enfocar el primer día del mes actual/primer mes a la vista/primer año a la vista.
• Tecla Fin para enfocar el último día del mes actual/último mes visto/último año visto.
• Teclas de flecha para navegar por los días/meses/años. Navegar antes del primer elemento y después del último elemento cambiará la vista a la página del mes/año/año siguiente/anterior.

Cuando un día dentro de la vista days esté enfocado, use:

• Teclas Shift + Re Pág para pasar al año anterior.
• Teclas Shift + Av Pág para pasar al año siguiente.
• Tecla Espacio o Intro para seleccionar el día enfocado actualmente.

Cuando se enfoca un mes dentro de la vista months, use:

• Tecla Espacio o Intro para cambiar ActiveDate al mes actualmente enfocado y cambiar a la vista days.

Cuando se enfoca un año dentro de la vista years, use:

• Tecla Espacio o Intro para cambiar ActiveDate al año actualmente enfocado y cambiar a la vista months.

Cuando los botones anterior o siguiente (en el subtítulo) estén enfocados, use:

• Tecla Espacio o Intro para cambiar a la página del mes/año/año anterior/siguiente.

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

• Tecla Espacio o Intro para cambiar a la vista months.

Cuando el botón del año (en el subtítulo) esté enfocado, use:

• Tecla Espacio o Intro para cambiar a la vista years.

Styling

El IgbCalendar componente expone partes CSS para casi todos sus elementos internos. En la tabla siguiente se enumeran todas las partes CSS expuestas:

Nombre	Descripción
header	El elemento de encabezado.
header-title	El elemento del título del encabezado.
header-date	El elemento de fecha del encabezado.
content	El elemento de contenido que contiene las vistas y los elementos de navegación.
navigation	El elemento contenedor de navegación.
months-navigation	El elemento del botón de navegación de meses.
years-navigation	El elemento del botón de navegación de años.
years-range	El elemento de rango de años.
navigation-buttons	El contenedor de botones de navegación.
navigation-button	Botón de navegación anterior/siguiente.
days-view-container	El elemento contenedor de vista de días.
days-view	Elemento de vista de días.
months-view	El elemento de vista de meses.
years-view	El elemento de vista de años.
days-row	Elemento de fila de días.
label	Elemento de etiqueta de encabezado de semana.
week-number	Elemento de número de semana.
week-number-inner	Elemento interior del número de semana.
date	Elemento de fecha.
date-inner	Elemento interior de fecha.
first	El primer elemento de fecha seleccionado.
last	El último elemento de fecha seleccionado.
inactive	Elemento de fecha inactivo.
hidden	Elemento de fecha oculto.
weekend	Elemento de fecha de fin de semana.
range	Rango del elemento seleccionado.
special	Elemento de fecha especial.
disabled	Elemento de fecha deshabilitado.
single	Elemento de fecha único seleccionado.
preview	Elemento de fecha de vista previa de selección de rango.
month	Elemento mes.
month-inner	Elemento interior del mes.
year	Elemento año.
year-inner	Elemento interior del año.
selected	Indica el estado seleccionado. Se aplica a los elementos de fecha, mes y año.
current	Indica el estado actual. Se aplica a los elementos de fecha, mes y año.

Usando estas partes CSS podemos personalizar la apariencia del componente de la IgbCalendar siguiente manera:

igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected),
igc-calendar::part(month-inner selected):focus,
igc-calendar::part(year-inner selected):focus {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
}

igc-calendar::part(date-inner selected):hover,
igc-calendar::part(month-inner selected):hover,
igc-calendar::part(year-inner selected):hover {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
}

igc-calendar::part(label),
igc-calendar::part(navigation-button),
igc-calendar::part(months-navigation):hover,
igc-calendar::part(months-navigation):focus,
igc-calendar::part(years-navigation):hover,
igc-calendar::part(years-navigation):focus {
  color: var(--ig-primary-300);
}

igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus {
  color: var(--ig-primary-800);
}
css

El siguiente ejemplo demuestra la configuración CSS anterior:

EXAMPLE

MODULES

RAZOR

CalendarStyling.css

index.css

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbCalendarModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected),
igc-calendar::part(month-inner selected):focus,
igc-calendar::part(year-inner selected):focus {
    background: #446418;
    border-color: #446418;
}

igc-calendar::part(date-inner selected):hover,
igc-calendar::part(month-inner selected):hover,
igc-calendar::part(year-inner selected):hover {
    background: #7d9b5d;
    border-color: #7d9b5d;
}

igc-calendar::part(label),
igc-calendar::part(navigation-button),
igc-calendar::part(months-navigation):hover,
igc-calendar::part(months-navigation):focus,
igc-calendar::part(years-navigation):hover,
igc-calendar::part(years-navigation):focus {
    color: #7d9b5d;
}

igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus {
    color: #446418;
}
</style>
<div class="container vertical">
    <style>
        igc-calendar::part(date-inner selected),
        igc-calendar::part(month-inner selected),
        igc-calendar::part(year-inner selected),
        igc-calendar::part(month-inner selected):focus,
        igc-calendar::part(year-inner selected):focus {
            background: #446418;
            border-color: #446418;
        }

        igc-calendar::part(date-inner selected):hover,
        igc-calendar::part(month-inner selected):hover,
        igc-calendar::part(year-inner selected):hover {
            background: #7d9b5d;
            border-color: #7d9b5d;
        }

        igc-calendar::part(label),
        igc-calendar::part(navigation-button),
        igc-calendar::part(months-navigation):hover,
        igc-calendar::part(months-navigation):focus,
        igc-calendar::part(years-navigation):hover,
        igc-calendar::part(years-navigation):focus {
            color: #7d9b5d;
        }

        igc-calendar::part(navigation-button):hover,
        igc-calendar::part(navigation-button):focus {
            color: #446418;
        }
    </style>
    <div>
        <IgbCalendar />
    </div>
</div>

@code {
    

}razorコピー

igc-calendar::part(date-inner selected),
igc-calendar::part(month-inner selected),
igc-calendar::part(year-inner selected),
igc-calendar::part(month-inner selected):focus,
igc-calendar::part(year-inner selected):focus {
    background: #446418;
    border-color: #446418;
}

igc-calendar::part(date-inner selected):hover,
igc-calendar::part(month-inner selected):hover,
igc-calendar::part(year-inner selected):hover {
    background: #7d9b5d;
    border-color: #7d9b5d;
}

igc-calendar::part(label),
igc-calendar::part(navigation-button),
igc-calendar::part(months-navigation):hover,
igc-calendar::part(months-navigation):focus,
igc-calendar::part(years-navigation):hover,
igc-calendar::part(years-navigation):focus {
    color: #7d9b5d;
}

igc-calendar::part(navigation-button):hover,
igc-calendar::part(navigation-button):focus {
    color: #446418;
}
cssコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

API References

• IgbCalendar
• IgbRadio
• IgbRadioGroup
• ActiveDate
• ActiveView
• IgbDateRangeDescriptor
• DateRange
• Styling & Themes

Additional Resources

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub