How To Change Style Sheet for QCalendarWidget

**jthacker** · 6th May 2010, 11: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...!

Qt Code:

Switch view

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

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

To copy to clipboard, switch view to plain text mode

what should I add more to this?

thanks.

**tbscope** · 6th May 2010, 11:57

The calender widget can not be customized by stylesheets (yet)

**jthacker** · 6th May 2010, 12: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, 13:01

can any body help please...?

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

**jthacker** · 6th May 2010, 13:40

anybody........?

**tbscope** · 6th May 2010, 17: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, 05: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, 08: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, 12:26

hey thanx evetybody..!

**Strix Code** · 11th May 2010, 17:23

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

Qt Code:

Switch view

// 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);
}

// 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);
}

To copy to clipboard, switch view to plain text mode

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

**wysota** · 11th May 2010, 21:56

If the widget is called qt_calendar_navigationbar then you can reference it like so:

css Code:

Switch view

#qt_calendar_navigationbar {
  //...
}

#qt_calendar_navigationbar {
  //...
}

To copy to clipboard, switch view to plain text mode

**sedi** · 31st July 2013, 21: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 of the widget tells us, what those elements are named:

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:

->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, 21:19

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()

**sedi** · 31st July 2013, 22:38

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

**blooy** · 26th June 2014, 16:49

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

Qt Code:

Switch view

/* 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); }

/* 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); }

To copy to clipboard, switch view to plain text mode

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

Qt Code:

Switch view

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

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

To copy to clipboard, switch view to plain text mode

**RolandHughes** · 4th March 2016, 15: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.

Thread: How To Change Style Sheet for QCalendarWidget

Thread Tools

Search Thread

Display

How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

The following user says thank you to aamer4yu for this useful post:

Re: How To Change Style Sheet for QCalendarWidget

The following user says thank you to wysota for this useful post:

Re: How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

The following user says thank you to wysota for this useful post:

Re: How To Change Style Sheet for QCalendarWidget

Re: How To Change Style Sheet for QCalendarWidget

The following 2 users say thank you to blooy for this useful post:

Re: How To Change Style Sheet for QCalendarWidget

Similar Threads

How to change weekends red color in QCalendarWidget?

Problems with Gradient style used through Style sheet on ARM platform

How to set Style sheet for QCalendarWidget?

Style Sheet speed

How to use style sheet

Bookmarks

Bookmarks

Posting Permissions