Calendar Date Differentiation


I need to create a more easily identifiable and differentiated date font (bold, highlighted, ... something) to draw the attention of dates that have services available versus dates that do not have services available. Currently, the Black vs Gray color palette is hard to see with the thin lines of the font face on some monitors (i.e. laptop in sunlight, mobile phone in any light, brightness/contrast of any screen, etc.).

Not to mention the difficulty of new/infrequent users or those with old/weak eyes or other impairments would have and would lead to user frustration.


Believe it or not, the 15th shown above has available time, but it's lost in the gray text everywhere.

There is a font-weight tag in the CSS of the table ( font-weight: 700; to the ".datePicker .bookable" class), and editing a local copy (i.e. not server-side and therefore can't be saved) only allowed a "little" better boldface (1000 max vs the 700 default) than what you see above.

Is this something that we can get access to in the theme settings maybe? Or just have defaulted to a heavier emphasis for those dates with available services?

Maybe a gray ring around the date that then turns to the theme highlight color when selected?


2 Replies
Yes, I have the same issues - is this something Microsoft are considering?
Same problem here as well - very surprised at this given Microsoft's commitment to accessible design. Bold font weight and/or a shape around the valid dates would help our users identify which they should click on to find available times.