PDA

View Full Version : How To Change Style Sheet for QCalendarWidget



jthacker
6th May 2010, 12:12
Hey ,
can any body tell me how to change the style sheet for QCalendarWidget?
mainly i want to change the backgroung-color of navigationbar...!



QWidget *widget = new QWidget;

QCalendarWidget *calendar = new QCalendarWidget(widget);
QString style="QMenu { font-size:16px; width: 150px; left: 20px;"
"background-color:qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #cccccc, stop: 1 #333333);}"
"QToolButton {icon-size: 48px, 48px;background-color: qlineargradient(x1:0, y1:0, x2:0,"
"y2:1, stop: 0 #cccccc, stop: 1 #333333);"
"height: 100px; width: 200px;}"
"QAbstractItemView {selection-background-color: rgb(255, 174, 0);}"
"QToolButton::menu-arrow {}"
"QToolButton::menu-button {}"
"QToolButton::menu-indicator{width: 50px;}"
"QToolButton::menu-indicator:pressed,"
"QToolButton::menu-indicator:open{top:10px; left: 10px;}"
"QListView {background-color:white;}"
"QSpinBox::up-button { subcontrol-origin: border;"
"subcontrol-position: top right; width:50px; border-image: url(icons:arrow_up_n.png);}"
"QSpinBox::down-button {subcontrol-origin: border; subcontrol-position: bottom right;"
"border-width: 1px; width:50px;}"
"QSpinBox::down-arrow { width:26px; height:17px;"
"image: url(icons:arrow_down_n.png); } ";

calendar->setStyleSheet(style);



what should I add more to this?

thanks.

tbscope
6th May 2010, 12:57
The calender widget can not be customized by stylesheets (yet)

jthacker
6th May 2010, 13:04
the above stuff works fine ....!!!
calendarwidget's style sheet is getting changed but can't do for navigation bar...
plz help...!
thanks.

jthacker
6th May 2010, 14:01
can any body help please...?


i have tried many conbination but can't do it..!

jthacker
6th May 2010, 14:40
anybody........?

tbscope
6th May 2010, 18:49
I don't want to sound like a jackass, but READ THE DOCUMENTATION!!!
You CAN NOT style the calender widget via style sheets, IT IS DOCUMENTED!

Sure, you can change the background because after all, the calender widget is based on QWidget.

aamer4yu
7th May 2010, 06:11
You will need to subclass QCalendarWidget and do the styling yourself for the navigation bar.
You can look into the source code for QCalendarWidget

wysota
7th May 2010, 09:16
The navigation bar is made of buttons so in theory styling the buttons inside the widget should be possible. At least simple things (such as changing colours of foreground and background) seem to work. The bar as a whole is probably not stylable, as already written.

jthacker
8th May 2010, 13:26
hey thanx evetybody..!

Strix Code
11th May 2010, 18:23
Actually, it is possible to style the navigation bar. I've done it before, here's code from a real-world application:


// Hack: change calendar title colors
QWidget *calendarNavBar = calendar->findChild<QWidget *>("qt_calendar_navigationbar");
if (calendarNavBar) {
QPalette pal = calendarNavBar->palette();
pal.setColor(calendarNavBar->backgroundRole(), QColor(220, 231, 245));
pal.setColor(calendarNavBar->foregroundRole(), QColor(21, 28, 85));
calendarNavBar->setPalette(pal);
}

Of course this code depends on internal implementation of QCalendarWidget, but there's no official way to do it anyway.

wysota
11th May 2010, 22:56
If the widget is called qt_calendar_navigationbar then you can reference it like so:


#qt_calendar_navigationbar {
//...
}

sedi
31st July 2013, 22:02
This thread is three years old, but as it is apparently the only source you can find about styling the calendar popup, chances are, that somebody will find it useful to know, that even things like the nextMonth and prevMonth-Buttons are perfectly stylable.

This is e.g. important for Necessitas/Android, where those buttons are way to small to be of any use, at least on a highres Amoled tablet screen.

Some old source code (http://qt4-x11.sourcearchive.com/documentation/4.4.2/qcalendarwidget_8cpp-source.html) of the widget tells us, what those elements are named:

prevMonth->setObjectName(QLatin1String("qt_calendar_prevmonth"));
nextMonth->setObjectName(QLatin1String("qt_calendar_nextmonth"));
monthButton->setObjectName(QLatin1String("qt_calendar_monthbutton"));
yearButton->setObjectName(QLatin1String("qt_calendar_yearbutton"));
yearEdit->setObjectName(QLatin1String("qt_calendar_yearedit"));

This is what I use for my app:

->setStyleSheet( "QDateEdit {"
"min-height:"+QString::number(this->editHeight)+"px; "
"max-height:"+QString::number(this->editHeight)+"px; "
"min-width:"+QString::number(this->editWidth)+"px; "
"margin: 0px; padding-top: 0x; padding-bottom: 0px; "
"color: rgb(90,31,0); background-color: rgb(253, 231, 146);"
"}"
"QDateEdit::up-button { subcontrol-position: right; height: "+QString::number(this->editHeight)+"px; width: "+QString::number(this->controlWidth)+"px;}"// subcontrol-color: rgb(90,31,0);}"
"QDateEdit::drop-down { subcontrol-position: right; height: "+QString::number(this->editHeight)+"px; width: "+QString::number(this->controlWidth)+"px;}"// background-color: rgb(253, 231, 146);}"
"QDateEdit::up-button { width: "+QString::number(this->editHeight)+"px; height: "+QString::number(this->editHeight)+"px; background-color: rgb(253, 231, 146); }"
"QDateEdit::up-arrow { "
"border-left: "+arrowSizeString+"px solid none;"
"border-right: "+arrowSizeString+"px solid none;"
"border-bottom: "+arrowSizeString+"px solid rgb(90,31,0);"
"width: 0px; height: 0px; }"
"QDateEdit::drop-down { width: "+QString::number(this->editHeight)+"px; height: "+QString::number(this->editHeight)+"px; background-color: rgb(253, 231, 146); }"
"QDateEdit::down-arrow { "
"border-left: "+arrowSizeString+"px solid none;"
"border-right: "+arrowSizeString+"px solid none;"
"border-top: "+arrowSizeString+"px solid rgb(90,31,0);"
"width: 0px; height: 0px; }"
"#qt_calendar_prevmonth {width: "+QString::number(this->editHeight)+"px; height: "+QString::number(this->editHeight)+"px; icon-size: "+QString::number(this->editHeight)+"px}"
"#qt_calendar_nextmonth {width: "+QString::number(this->editHeight)+"px; height: "+QString::number(this->editHeight)+"px; icon-size: "+QString::number(this->editHeight)+"px}"

"margin-bottom: 0px; border-width: 0px; padding: 0px;"
"min-height:"+QString::number(this->editHeight)+"px; "
"border: 0px solid rgb(90,31,0);"
"color: rgb(90,31,0);"

);

wysota
31st July 2013, 22:19
This is e.g. important for Necessitas/Android, where those buttons are way to small to be of any use, at least on a highres Amoled tablet screen.

See QApplication::setGlobalStrut()

sedi
31st July 2013, 23:38
I bow my head in awe. Now that's a cool thing to know... Thank you!

blooy
26th June 2014, 17:49
Here's a comprehensive syling of the QCalendarWidget with stylesheet:


/* navigation bar */
QCalendarWidget QWidget#qt_calendar_navigationbar { background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #cccccc, stop: 1 #333333); }
QCalendarWidget QToolButton {
height: 60px;
width: 150px;
color: white;
font-size: 24px;
icon-size: 56px, 56px;
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #cccccc, stop: 1 #333333);
}
QCalendarWidget QMenu {
width: 150px;
left: 20px;
color: white;
font-size: 18px;
background-color: rgb(100, 100, 100);
}
QCalendarWidget QSpinBox {
width: 150px;
font-size:24px;
color: white;
background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop: 0 #cccccc, stop: 1 #333333);
selection-background-color: rgb(136, 136, 136);
selection-color: rgb(255, 255, 255);
}
QCalendarWidget QSpinBox::up-button { subcontrol-origin: border; subcontrol-position: top right; width:65px; }
QCalendarWidget QSpinBox::down-button {subcontrol-origin: border; subcontrol-position: bottom right; width:65px;}
QCalendarWidget QSpinBox::up-arrow { width:56px; height:56px; }
QCalendarWidget QSpinBox::down-arrow { width:56px; height:56px; }

/* header row */
QCalendarWidget QWidget { alternate-background-color: rgb(128, 128, 128); }

/* normal days */
QCalendarWidget QAbstractItemView:enabled
{
font-size:24px;
color: rgb(180, 180, 180);
background-color: black;
selection-background-color: rgb(64, 64, 64);
selection-color: rgb(0, 255, 0);
}

/* days in other months */
QCalendarWidget QAbstractItemView:disabled { color: rgb(64, 64, 64); }


This is a listing of the underlying object tree in a QCalendarWidget:


QCalendarWidget [calendarWidget] 115af0a8
QVBoxLayout [] 115ad7c0
QCalendarModel [] 12d58ef8
QCalendarView [qt_calendar_calendarview] 115ac870
QWidget [qt_scrollarea_viewport] 115af1a8
QWidget [qt_scrollarea_hcontainer] 115ad268
QScrollBar [] 115af1e8
QBoxLayout [] 115ad940
QWidget [qt_scrollarea_vcontainer] 115ad298
QScrollBar [] 115af248
QBoxLayout [] 12d599d0
QStyledItemDelegate [] 12d54a90
QHeaderView [] 12d5c648
QWidget [qt_scrollarea_viewport] 12d5c668
QWidget [qt_scrollarea_hcontainer] 12d5cd98
QScrollBar [] 12d5c6a8
QBoxLayout [] 12d5de80
QWidget [qt_scrollarea_vcontainer] 12d5cdc8
QScrollBar [] 12d5c748
QBoxLayout [] 12d5df58
QItemSelectionModel [] 12d8cb60
QHeaderView [] 12d5c848
QWidget [qt_scrollarea_viewport] 12d8bc78
QWidget [qt_scrollarea_hcontainer] 12d5d1e8
QScrollBar [] 12d8bcd8
QBoxLayout [] 12d8ed50
QWidget [qt_scrollarea_vcontainer] 12d5d218
QScrollBar [] 12d8bd58
QBoxLayout [] 12d8ee28
QItemSelectionModel [] 12d8cb70
QTableCornerButton [] 12d8be58
QItemSelectionModel [] 12d8cbd0
QWidget [qt_calendar_navigationbar] 12d8bf58
QPrevNextCalButton [qt_calendar_prevmonth] 12d8bfb8
QPrevNextCalButton [qt_calendar_nextmonth] 12d8bff8
QToolButton [qt_calendar_monthbutton] 12d8c038
QMenu [] 12d8c198
QAction [] 12d8cbe0
QAction [] 12d8cc10
QAction [] 12d8cc20
QAction [] 12d8cc30
QAction [] 12d8cc40
QAction [] 12d8cc50
QAction [] 12d8cc60
QAction [] 12d8cc70
QAction [] 12d8cc80
QAction [] 12d8cc90
QAction [] 12d8cca0
QAction [] 12d8ccb0
QAction [] 12d8ccc0
QToolButton [qt_calendar_yearbutton] 12d996f0
QSpinBox [qt_calendar_yearedit] 12d99730
QLineEdit [qt_spinbox_lineedit] 12d99770
QWidgetLineControl [] 12d4f0d0
QValidator [qt_spinboxvalidator] 12d8f260
QHBoxLayout [] 12d8f290
QCalendarDelegate [] 12d965c8
QCalendarTextNavigator [] 12daac38

RolandHughes
4th March 2016, 16:28
Sorry to unearth this old thread but my question is directly based on this.

First off, many thanks to the poster who put up the massive and good looking stylesheet. I have used it for a base and tweaked it for projects. One thing I have spent several hours trying to figure out is how to change the cell spacing via the stylesheet (or in code). In my current embedded target I want to use a 24 point font for the digits. It "should" fit just fine, but padding/cell spacing around the numbers seems to remain constant which shoves the widget off one edge or the other. (Widget has to fit in 500 px wide display.)

Has anyone found a way to tunnel in changing the width of the columns or the spacing around the cells?

Thanks in advance.