View Full Version : QCalendar Widget styling

13th April 2009, 12:15

I am looking to create a simple organizer using Qt. I realize that one way of doing it is by subclassing QCalendarWidget and overriding the paintCell method. But it seems that css cannot be used to style qcalendarwiget and only the background image can be changed.

I do not have the time to implement the entire calendar by myself, is there any way to style the calendar using CSS ?


13th April 2009, 18:00
It's very easy to implement a calendar using QDate and QGraphicsView.
Screen (http://img509.imageshack.us/img509/5408/screens.png):p

13th April 2009, 18:16
I was able to change my calendar widget using CSS, qtopia support told me that CSS is not fully implemented yet for the calendar widget. I used QToolButton, QMenu, QListview, and was able to change the arrows, background, month popup menu. I looked at the actual code in the qcalendarwidget.cpp file to see what widgets it used and then put my stylesheet onto those widgets.
If you need my code let me know.

15th April 2009, 11:53
As requested here is my stylesheet. It was customized for color and icons, mainly I needed larger selectors (arrows, and tool menu) since I am using a touchscreen and not a mouse. When I touch the month, the pop menu appears.
I had a difficult time getting the next/previous months icons working so qt supported suggested this.

QToolButton *btn = calendar->findChild<QToolButton *>("qt_calendar_prevmonth");
QIcon icon;
icon.addPixmap(QPixmap(QString::fromUtf8(PREVMONTH BUTTON_N)), QIcon::Normal, QIcon::On);
icon.addPixmap(QPixmap(QString::fromUtf8(PREVMONTH BUTTON_S)), QIcon::Active, QIcon::On);
icon.addPixmap(QPixmap(QString::fromUtf8(PREVMONTH BUTTON_S)), QIcon::Selected, QIcon::On);
btn = calendar->findChild<QToolButton *>("qt_calendar_nextmonth");

StyleSheet, there are some style widgets that are blank, just ignore them.

calendar->setStyleSheet("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:open{top:10px; left: 10px;}
QListView {background-color:white;}
QSpinBox {width:200px; border-width: 2px;}
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); } ")

15th April 2009, 15:39
Hi QbelcorT,

Thanks for the code snippets . Since I'm beginning to learn Qt, it would be great if I could have the entire source code with all icons . This should help me greatly in understanding the basics of Qt.

Thanks a lot.

7th December 2010, 22:49
Can I change the color of numbers of a week, and names of days? Actually I mean background color. Because I'm trying with no result.


I've changed QAbstractItemView stylesheet.

thanks in advance
best regards