Personalización de Estilos para el Calendario Emergente en QDateEdit de Qt

Este artículo aborda la configuración de estilos para el widget QDateEdit y su calendario emergente en Qt, centrándose en la modificación mediante hojas de estilo (QSS) y código C++.

Estilización de QDateEdit

El widget QDateEdit admite personalización básica a través de hojas de estilo. A continuación, se muestra un ejemplo donde se alteran los colores de fondo y texto en estados normales y enfocados.

/* Estilo base para QDateEdit */
QDateEdit {
    background-color: rgba(50, 150, 200, 0.9);
    color: rgba(255, 255, 255, 1);
    padding: 4px;
}

/* Estilo al interactuar con QDateEdit */
QDateEdit:focus {
    border: 2px dashed rgba(0, 200, 100, 0.7);
    background-color: rgba(60, 160, 210, 1);
}

Este código aplica un fondo azul claro y texto blanco por defecto, con un borde verde discontinuo al enfocar el control.

Personalización del QCalendarWidget

El calendario emergente de QDateEdit se basa en QCalendarWidget, compuesto por múltiples sub-controles. Su diseño requiere selectores específicos para elementos como la vista de días, la barra de navegación y los botones de mes.

/* Fondo de la vista de días */
#mi_calendario_vista {
    background-color: rgba(20, 80, 160, 0.85);
    font-family: Arial;
    font-size: 14px;
}

/* Alternativa para filas alternas en la vista */
QCalendarWidget QTableView {
    alternate-background-color: rgba(20, 80, 160, 0.85);
    color: rgba(255, 255, 255, 1);
}

/* Barra de navegación superior */
QCalendarWidget QWidget#navegacion_calendario {
    background-color: rgba(10, 50, 120, 1);
    padding: 5px;
}

/* Botón para mes anterior */
QCalendarWidget QToolButton#boton_mes_anterior {
    qproperty-icon: url(:/icons/icono_izquierda.png);
    min-width: 30px;
}

/* Botón para mes siguiente */
QCalendarWidget QToolButton#boton_mes_siguiente {
    qproperty-icon: url(:/icons/icono_derecha.png);
    min-width: 30px;
}

/* Días activos del mes actual */
QCalendarWidget QAbstractItemView:enabled {
    font-size: 16px;
    color: rgb(255, 255, 255);
    selection-background-color: rgb(100, 100, 200);
    selection-color: rgb(255, 255, 0);
}

/* Días de otros meses */
QCalendarWidget QAbstractItemView:disabled {
    color: rgba(150, 150, 150, 0.7);
}

En este ejemplo, los identificadores como #mi_calendario_vista corresponden al nombre de objeto configurado en el widget. Es posible definir colores personalizados para fines de semana mediante código C++:

QTextCharFormat formato_sabado = widgetCalendario->weekdayTextFormat(Qt::Saturday);
formato_sabado.setForeground(QBrush(Qt::cyan, Qt::SolidPattern));
widgetCalendario->setWeekdayTextFormat(Qt::Saturday, formato_sabado);

QTextCharFormat formato_domingo = widgetCalendario->weekdayTextFormat(Qt::Sunday);
formato_domingo.setForeground(QBrush(Qt::magenta, Qt::SolidPattern));
widgetCalendario->setWeekdayTextFormat(Qt::Sunday, formato_domingo);

Este código aplica colores cian y magenta a los nombres de sábado y domingo, respectivamente, mejorando la visibilidad en el calendario.

Etiquetas: Qt QDateEdit QCalendarWidget QSS C++

Publicado el 6-10 17:33