Search code examples
cssreactjsoffice-ui-fabric

Styling the UI Fabric Date Picker Callout

How could I modify the style of elements inside the callout of the UI Fabric Date Picker? For example highlight the current month?

enter image description here

According to the documentation, I should be able to use the DatePicker styles property to target sub-components, but I don't know how to reach specific elements:

styles = {
  callout: {
  ... what goes here?
  }
}

I am trying to get this to work without having to rely on yet another third party library like styled-components.

Solution

  • The 'callout' object (as the others e.g. icon, root, textField for DatePicker component) expects css-styles (camelCased, no dash).

    'Callout' refers to the HTML-element wrapping the popup, Icon tothe Icon in the DatePicker, etc.

    styles = {
  callout: {
    maxHeight: '300px',
    fontSize: '2rem',
    /* etc */
  },
  icon: {
     color: 'red'
  },
  root: {},
  textField: {}
}

    Edit:

    Highlighting the current month you can archive easily via the DatePicker Prop highlightCurrentMonth (from doc: 'Whether the month picker should highlight the current month')

    Link to DatePicker doc