QCalendar Widget styling

[succorguy]

Hi,

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 ?

Thanks

[Grimlock]

It's very easy to implement a calendar using QDate and QGraphicsView.
Screen

[QbelcorT]

Hi,
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.

[QbelcorT]

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(PREVMONTHBUTTON_N)), QIcon::Normal, QIcon::On);
icon.addPixmap(QPixmap(QString::fromUtf8(PREVMONTHBUTTON_S)), QIcon::Active, QIcon::On);
icon.addPixmap(QPixmap(QString::fromUtf8(PREVMONTHBUTTON_S)), QIcon::Selected, QIcon::On);
btn->setIcon(icon);
btn = calendar->findChild<QToolButton *>("qt_calendar_nextmonth");
....

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

To copy to clipboard, switch view to plain text mode 

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:pressed,
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); } ")

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:pressed,
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); } ")

To copy to clipboard, switch view to plain text mode 

[succorguy]

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.

[Tomasz]

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.

----------------------------------------
SOLVED.

I've changed QAbstractItemView stylesheet.

thanks in advance
best regards
Tomasz