WeekDays

Customize UI

Day Header Input ModalWrapper Month PopoverWrapper Selector WeekDays Props Year

Weekdays component displays row with weekday names on the top of day calendar. It receives collection of localised weekday names.

{
  "short": "su",
  "narrow": "s",
  "abbreviated": "Sun",
  "wide": "Sunday",
  "numeric": 0
}

Replace it with custom component.

() => {
  const style = {
    boxSizing: 'border-box',
    flex: '1 1 calc(100% / 7)',
    color: 'black',
    textAlign: 'center',
    padding: '0',
    border: '2px dashed pink',
    margin: '2px',
    fontSize: '12px',
    height: '24px',
    lineHeight: '24px',
  }
  const CustomComponent = ({ name }) => {
    return <div style={style}>{name.narrow}</div>
  }
  return (
    <Datepicker
      onDateSet={date => {
        console.log('date set', date)
      }}
      minPrecision="day"
      renderWeekDayAs={CustomComponent}
      title="Demo datepicker"
    />
  )
}

() => {
  const style = {
    boxSizing: 'border-box',
    flex: '1 1 calc(100% / 7)',
    color: 'black',
    textAlign: 'center',
    padding: '0',
    border: '2px dashed pink',
    margin: '2px',
    fontSize: '12px',
    height: '24px',
    lineHeight: '24px',
  }
  const CustomComponent = ({ name }) => {
    return <div style={style}>{name.narrow}</div>
  }
  return (
    <Datepicker
      onDateSet={date => {
        console.log('date set', date)
      }}
      minPrecision="day"
      renderWeekDayAs={CustomComponent}
      title="Demo datepicker"
    />
  )
}

Props

names

Array<{ "short": "string", "narrow": "string", "abbreviated": "string", "wide": "string", "numeric": "number" }>

required

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Props