Vista de calendario
Una vista de calendario permite al usuario ver e interactuar con un calendario por el que se puede navegar por mes, año o década. Un usuario puede seleccionar una fecha determinada o un intervalo de fechas. No tiene una superficie de selector y el calendario es siempre visible.
¿Es este el control adecuado?
Usa una vista de calendario para permitir al usuario seleccionar una fecha determinada o un intervalo de fechas a partir de un calendario siempre visible.
Si necesitas permitir al usuario seleccionar varias fechas al mismo tiempo, debes usar una vista de calendario. Si necesitas que un usuario pueda elegir solo una fecha determinada y no necesitas que haya un calendario siempre visible, considera la posibilidad de usar un control CalendarDatePicker o DatePicker.
Para obtener más información sobre cómo elegir el control adecuado, consulta el artículo Controles de fecha y hora.
Ejemplos
La vista del calendario se compone de 3 vistas separadas: la vista de mes, la vista de año y la vista de década. De manera predeterminada, se inicia con la vista de mes abierta. Puedes especificar una vista de inicio estableciendo la propiedad DisplayMode.
Los usuarios hacen clic en el encabezado de la vista de mes para abrir la vista de año, y hacen clic en el encabezado de la vista de año para abrir la vista de década. Los usuarios seleccionan un año en la vista de década para volver a la vista de año y seleccionan un mes en la vista de año para volver a la vista de mes. Las dos flechas al lado del encabezado navegan hacia delante o hacia atrás por mes, año o década.
UWP y WinUI 2
Importante
La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.
Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.
Las API de este control existen en el espacio de nombres Windows.UI.Xaml.Controls .
- API de UWP:Clase CalendarView, evento SelectedDatesChanged
- Abra la aplicación WinUI 2 Gallery y vea CalendarView en acción. La aplicación WinUI 2 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 2. Obtenga la aplicación en Microsoft Store u obtenga el código fuente en GitHub.
Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos y plantillas más actuales para todos los controles. WinUI 2.2 o posterior incluye una nueva plantilla para este control que usa esquinas redondeadas. Para obtener más información, consulta Radio de redondeo.
Crear una vista de calendario
- API importantes:Clase CalendarView, evento SelectedDatesChanged
La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.
En este ejemplo se muestra cómo crear una vista de calendario sencilla.
<CalendarView/>
La vista de calendario resultante tiene este aspecto:
Seleccionar fechas
De manera predeterminada, la propiedad SelectionMode se establece en Single. Esto permite al usuario seleccionar una fecha determinada en el calendario. Establece SelectionMode en None para deshabilitar la selección de fecha.
Establece SelectionMode en Multiple para permitir al usuario seleccionar varias fechas. Puedes seleccionar varias fechas mediante programación agregando objetos DateTime/DateTimeOffset a la colección SelectedDates, tal y como se muestra aquí:
calendarView1.SelectedDates.Add(DateTimeOffset.Now);
calendarView1.SelectedDates.Add(new DateTime(1977, 1, 5));
Un usuario puede anular la selección de una determinada fecha haciendo clic o pulsándola en la cuadrícula del calendario.
Puedes controlar el evento SelectedDatesChanged para que se notifique cuando la colección SelectedDates haya cambiado.
Nota:
Para obtener información importante sobre los valores de fecha, consulta Valores de DateTime y Calendar en el artículo Controles de fecha y hora.
Personalizar la apariencia de la vista de calendario
La vista del calendario se compone de elementos XAML definidos en ControlTemplate y de elementos visuales representados directamente por el control.
- Los elementos XAML que se definen en la plantilla de control incluyen el borde dentro del que se encuentran el control, el encabezado, los botones Anterior y Siguiente y los elementos DayOfWeek. Puedes aplicar un estilo y crear una nueva plantilla para estos elementos como cualquier control de XAML.
- La cuadrícula del calendario está compuesta por objetos CalendarViewDayItem. No puedes aplicar un estilo o crear una nueva plantilla para estos elementos, pero se proporcionan diversas propiedades para que puedas personalizar su apariencia.
Este diagrama muestra los elementos que componen la vista de mes del calendario. Para obtener más información, consulta los comentarios sobre la clase CalendarViewDayItem.
Esta tabla enumera las propiedades que puedes cambiar para modificar la apariencia de los elementos del calendario.
De manera predeterminada, la vista de mes muestra 6 semanas a la vez. Puedes cambiar el número de semanas mostradas estableciendo la propiedad NumberOfWeeksInView. El número mínimo de semanas para mostrar es 2; el máximo es 8.
De manera predeterminada, las vistas de año y década se muestran en una cuadrícula de 4 x 4. Para cambiar el número de filas o columnas, llama a SetYearDecadeDisplayDimensions con el número de filas y columnas deseado. Esto cambiará la cuadrícula para las vistas de año y década.
Aquí, las vistas de año y década están establecidas para mostrarse en una cuadrícula de 3x4.
calendarView1.SetYearDecadeDisplayDimensions(3, 4);
De manera predeterminada, la fecha mínima que se muestra en la vista del calendario es 100 años antes de la fecha actual y la fecha máxima que se muestra es 100 años más allá de la fecha actual. Puedes cambiar las fechas mínimas y máximas que muestra el calendario estableciendo las propiedades MinDate y MaxDate.
calendarView1.MinDate = new DateTime(2000, 1, 1);
calendarView1.MaxDate = new DateTime(2099, 12, 31);
Actualizar elementos de calendario por día
Cada día del calendario se representa mediante un objeto CalendarViewDayItem. Para acceder a un determinado elemento de día y usar sus propiedades y métodos, controla el evento CalendarViewDayItemChanging y usa la propiedad de elemento de los argumentos del evento para acceder a CalendarViewDayItem.
Puedes hacer que un día no se pueda seleccionar en la vista de calendario estableciendo su propiedad CalendarViewDayItem.IsBlackout en true.
Puedes mostrar información contextual sobre la densidad de eventos en un día llamando al método CalendarViewDayItem.SetDensityColors. Puedes mostrar de 0 a 10 barras de la densidad para cada día y establecer el color de cada barra.
Estos son algunos elementos de día en un calendario. Los días 1 y 2 están suprimidos. Los días 2, 3 y 4 tienen varias barras de densidad establecidas.
Representación por fases
Una vista de calendario puede contener un gran número de objetos CalendarViewDayItem. Para mantener la interfaz de usuario con capacidad de respuesta y habilitar la navegación fluida mediante el calendario, la vista de calendario admite la representación por fases. Esto permite dividir el procesamiento de un elemento de día en fases. Si un día se mueve fuera de la vista antes de que se completen todas las fases, no se dedica más tiempo a intentar procesar y representar ese elemento.
Este ejemplo muestra fases de representación de una vista de calendario para la programación de citas.
- En la fase 0, se procesa el elemento de día predeterminado.
- En la fase 1, no se pueden reservar las fechas no disponibles. Esto incluye fechas pasadas, domingos y fechas que ya están reservadas en su totalidad.
- En la fase 2, comprueba cada cita reservada para el día. Muestras una barra de densidad de color verde para cada cita confirmada y una barra de densidad azul para cada cita provisional.
La clase Bookings de este ejemplo procede de una aplicación de reserva de citas ficticia y no se muestra.
<CalendarView CalendarViewDayItemChanging="CalendarView_CalendarViewDayItemChanging"/>
private void CalendarView_CalendarViewDayItemChanging(CalendarView sender,
CalendarViewDayItemChangingEventArgs args)
{
// Render basic day items.
if (args.Phase == 0)
{
// Register callback for next phase.
args.RegisterUpdateCallback(CalendarView_CalendarViewDayItemChanging);
}
// Set blackout dates.
else if (args.Phase == 1)
{
// Blackout dates in the past, Sundays, and dates that are fully booked.
if (args.Item.Date < DateTimeOffset.Now ||
args.Item.Date.DayOfWeek == DayOfWeek.Sunday ||
Bookings.HasOpenings(args.Item.Date) == false)
{
args.Item.IsBlackout = true;
}
// Register callback for next phase.
args.RegisterUpdateCallback(CalendarView_CalendarViewDayItemChanging);
}
// Set density bars.
else if (args.Phase == 2)
{
// Avoid unnecessary processing.
// You don't need to set bars on past dates or Sundays.
if (args.Item.Date > DateTimeOffset.Now &&
args.Item.Date.DayOfWeek != DayOfWeek.Sunday)
{
// Get bookings for the date being rendered.
var currentBookings = Bookings.GetBookings(args.Item.Date);
List<Color> densityColors = new List<Color>();
// Set a density bar color for each of the days bookings.
// It's assumed that there can't be more than 10 bookings in a day. Otherwise,
// further processing is needed to fit within the max of 10 density bars.
foreach (booking in currentBookings)
{
if (booking.IsConfirmed == true)
{
densityColors.Add(Colors.Green);
}
else
{
densityColors.Add(Colors.Blue);
}
}
args.Item.SetDensityColors(densityColors);
}
}
}
Obtención del código de ejemplo
- Ejemplo de la Galería de WinUI : consulta todos los controles XAML en un formato interactivo.
Artículos relacionados
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de