How to change header colors on calendar datepicker? | XM Community
Skip to main content

How to change header colors on calendar datepicker?

  • October 5, 2022
  • 8 replies
  • 1013 views
N
Forum|alt.badge.img+1

Hello,
I have added the Calendar DatePicker from the Qualtrics Library to my survey, but the all the header text, including nav buttons, is white (see photo). How can I change the color to black?
Screen Shot 2022-10-05 at 12.02.08 PM.png
I have tried two things so far:
1) I have tried to edit the HTML view on the question itself, see below (note the multiple places I try to put color: 'black'

What is the target first date of the study?
">https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css"> 
">https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"> 
">https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js"> 


2) In the Custom CSS in Look and Feel - Style, I put in the following code. Editing the first section color to #333 will change the days of the previous months to black, but nothing happens for the second section (see two screenshots below to see the color change):
.yui-skin-sam .yui-calendar td.calcell.oom { 
   background-color:#cccccc; 
   color:#333!important; 
   cursor:default; 
 }

 .yui-skin-sam .yui-calendar td.calcell.previous { 
   color:#333!important; 
 }
Screen Shot 2022-10-05 at 12.11.40 PM.pngScreen Shot 2022-10-05 at 12.11.53 PM.png
For both codes, when viewing and editing in the JavaScript Console Inspector, the colors do change for all headers, but not when I edit the actual code in the builder/look and feel. Thoughts? Thanks in advance!

*Please note that I have no JavaScript experience, just got this far by piecing stuff together through other community discussions and my friend who knows some code.

    8 replies

    Deepak
    QPN Level 8 ●●●●●●●●
    Forum|alt.badge.img+46
    • Deepak
    • October 5, 2022

    Hi nk1234
    Just include the below in look and feel>style>custom css
    .Skin .yui-skin-sam .yui-calendar .calweekdaycell {
      color: #222;
       
    }

    .Skin .yui-skin-sam .yui-calendar .calheader {

    color: #222;

    }

    .Skin .yui-skin-sam .yui-calendar td.calcell a {
      color: #222;
    }

    Hope this helps!

      N
      Forum|alt.badge.img+1
      • nk1234
      • Author
      • October 5, 2022

      Hi Deepak , thanks for your response!
      For whatever reason, it took a moment to start working but that worked!!! I'm thrilled, thank you!
      The last piece is turning the buttons black as well (calnavleft and calnavright). Can I try to mirror your code above to make those appear as well?
      Thank you again!

      EDIT: The full code (including code for the buttons) is below:

      .Skin .yui-skin-sam .yui-calendar .calweekdaycell {
       color: #222;
      }
      .Skin .yui-skin-sam .yui-calendar .calheader {
      color: #222;
      }
      .Skin .yui-skin-sam .yui-calendar td.calcell a {
       color: #222;
      }
      .Skin .yui-skin-sam .yui-calendar .calnavright:before {
       color: #222;
      }
      .Skin .yui-skin-sam .yui-calendar .calnavleft:before {
       color: #222;
      }

        Deepak
        QPN Level 8 ●●●●●●●●
        Forum|alt.badge.img+46
        • Deepak
        • October 5, 2022

        nk1234
        Try the below code for navigators:
        .Skin .yui-skin-sam .yui-calendar .calheader a.calnavleft:before {
         color: #222;
        }
        .Skin .yui-skin-sam .yui-calendar .calheader a.calnavright::before {
         color: #222;
        }
        Hope this helps!

          SuhasM
          Qualtrics Employee
          Forum|alt.badge.img+16
          • SuhasM
          • Qualtrics Employee
          • October 5, 2022

          Thank you so much Deepak for creating these amazing custom solutions for our community 👏

          J
          Level 1 ●
          Forum|alt.badge.img+4
          • jgcelis26
          • Level 1 ●
          • August 21, 2023

          Hello @Deepak,

           

          Thank you for posting this, It was also something I needed. Having said that, is there a way to modify the color on the date picker banner? See below. I would like to modify the gray color. 

          Thank you!

           

           

          Deepak
          QPN Level 8 ●●●●●●●●
          Forum|alt.badge.img+46
          • Deepak
          • August 21, 2023

          @jgcelis26 

          As mentioned above you can use following CSS:

          .Skin .yui-skin-sam .yui-calendar .calheader {

          background: #000;

          }

          Hope it helps!

            J
            Level 1 ●
            Forum|alt.badge.img+4
            • jgcelis26
            • Level 1 ●
            • August 21, 2023

            Thank you so much, @Deepak. I was missing the “background” command.

            Much appreciated!

            J
            Level 1 ●
            Forum|alt.badge.img+4
            • jgcelis26
            • Level 1 ●
            • August 21, 2023

            Hi @Deepak,

            One more question if you don’t mind. I noticed in one of your earlier responses the 2 semicolons in this part of the code and I was wondering if that was a typo, or if it was indeed meant to have 2 semicolons.

            Thank you!

             

             

              Terms & ConditionsAccessibility statement