Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Stylesheet to Calender popup
Qt 6.11 is out! See what's new in the release blog

Stylesheet to Calender popup

Scheduled Pinned Locked Moved Unsolved General and Desktop
5 Posts 3 Posters 17.5k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    Sagar Ojha
    wrote on last edited by
    #1

    how to give stylesheet to QDateEdit Calender popup?
    Is there any example I can go through??

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mostefa
      wrote on last edited by
      #2

      Here is my example for customizing calendarWidget stylesheet

      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 */
        /* 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 QAbstractItemView:disabled 
      { 
      color: rgb(64, 64, 64); 
      }
      

      Hope this can help!

      S 1 Reply Last reply
      5
      • M mostefa

        Here is my example for customizing calendarWidget stylesheet

        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 */
          /* 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 QAbstractItemView:disabled 
        { 
        color: rgb(64, 64, 64); 
        }
        

        Hope this can help!

        S Offline
        S Offline
        Sagar Ojha
        wrote on last edited by
        #3

        @mostefa Thanks for this coustomization example. It is giving me controll for complete counstomization, but I am not able to set background color for the calender. Calender poped up after clicking on QDateEdit.

        1 Reply Last reply
        0
        • yuvaramY Offline
          yuvaramY Offline
          yuvaram
          wrote on last edited by
          #4

          Hi @Sagar-Ojha

          In Qt Assistant stylesheet samples are provided.
          Search as : Qt Style Sheets Examples

          QString DEstylesheet = "QDateEdit { padding-right: 15px; border-width: 3;height : 30;font-size:20pt;color:#fff;"
                  "background-color: qlineargradient(spread:pad, x1:0.517, y1:0, x2:0.517, y2:1, stop:0 rgba(45, 45, 45, 255), stop:0.505682 rgba(45, 45, 45, 255), stop:1 rgba(29, 29, 29, 255));}"
                  ;
          
          m_DE       = new QDateEdit;
          m_DE->setStyleSheet(DEstylesheet);
          

          Yuvaram Aligeti
          Embedded Qt Developer
          : )

          1 Reply Last reply
          0
          • M Offline
            M Offline
            mostefa
            wrote on last edited by
            #5

            @Sagar-Ojha

            Not sure i understand what do you want,

            background-color of calendarWidget , is already changed with my sample code:

            QCalendarWidget QAbstractItemView:enabled 
            {
            	font-size:24px;  
            	color: rgb(180, 180, 180);  
            	background-color: green;  // here background-color is changed !!!
            	selection-background-color: rgb(64, 64, 64); 
            	selection-color: rgb(0, 255, 0); 
            }
            
            1 Reply Last reply
            0

            • Login

            • Login or register to search.
            • First post
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved