How To Change Style Sheet for QCalendarWidget

Printable View

Hey ,
can any body tell me how to change the style sheet for QCalendarWidget?
mainly i want to change the backgroung-color of navigationbar...!

Code:

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.

6th May 2010, 11:57
tbscope

Re: How To Change Style Sheet for QCalendarWidget

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

Re: How To Change Style Sheet for QCalendarWidget

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

Re: How To Change Style Sheet for QCalendarWidget

can any body help please...?

i have tried many conbination but can't do it..!
6th May 2010, 13:40
jthacker

Re: How To Change Style Sheet for QCalendarWidget

anybody........?
6th May 2010, 17:49
tbscope

Re: How To Change Style Sheet for QCalendarWidget

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.
7th May 2010, 05:11
aamer4yu

Re: How To Change Style Sheet for QCalendarWidget

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

Re: How To Change Style Sheet for QCalendarWidget

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.
8th May 2010, 12:26
jthacker

Re: How To Change Style Sheet for QCalendarWidget

hey thanx evetybody..!

Re: How To Change Style Sheet for QCalendarWidget

Actually, it is possible to style the navigation bar. I've done it before, here's code from a real-world application:
Code:

// 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.

11th May 2010, 21:56
wysota

Re: How To Change Style Sheet for QCalendarWidget
If the widget is called qt_calendar_navigationbar then you can reference it like so:
Code:

#qt_calendar_navigationbar { //... }
31st July 2013, 21:02
sedi

Re: How To Change Style Sheet for QCalendarWidget

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 of the widget tells us, what those elements are named:

Quote:

prevMonth->setObjectName(QLatin1String("qt_calendar_prevmont h"));
nextMonth->setObjectName(QLatin1String("qt_calendar_nextmont h"));
monthButton->setObjectName(QLatin1String("qt_calendar_monthbut ton"));
yearButton->setObjectName(QLatin1String("qt_calendar_yearbutt on"));
yearEdit->setObjectName(QLatin1String("qt_calendar_yearedit "));

This is what I use for my app:

Quote:

->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);"

);
31st July 2013, 21:19
wysota

Re: How To Change Style Sheet for QCalendarWidget

Quote:

Originally Posted by sedi

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()
31st July 2013, 22:38
sedi

Re: How To Change Style Sheet for QCalendarWidget

I bow my head in awe. Now that's a cool thing to know... Thank you!

Re: How To Change Style Sheet for QCalendarWidget

Here's a comprehensive syling of the QCalendarWidget with stylesheet:

Code:

/* 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:

Code:

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

4th March 2016, 15:28
RolandHughes

Re: How To Change Style Sheet for QCalendarWidget

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.