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

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.

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!

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

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!

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

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!

 

 

@jgcelis26 

As mentioned above you can use following CSS:

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

background: #000;

}

Hope it helps!

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

Much appreciated!

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!

 

 

Leave a Reply


Terms & Conditions