Day | React Calendar Toolkit

Customize UI

Day Props Wrap with custom CSS class Header Input ModalWrapper Month PopoverWrapper Selector WeekDays Year

Day component displays specific date with day precision. onDateSet callback prop allows to set provided Date object as selected in Datepicker. Replace it with custom component.

() => {
  const style = {
    boxSizing: 'border-box',
    flex: '1 1 calc(100%/7 - 4px)',
    color: 'black',
    textAlign: 'center',
    padding: '0',
    fontSize: '12px',
    lineHeight: '30px',
    border: '2px dashed pink',
    margin: '2px',
  }
  const CustomComponent = ({
    onDateSet,
    date,
    isSameMonth,
    isToday,
    isSelected,
    isDisabled,
    isHighlighted,
    isWeekend,
    name,
  }) => {
    const handleClick = () => {
      console.log('date set', date)
      onDateSet(date)
    }
    return (
      <div onClick={handleClick} style={style}>
        {name.numeric}
      </div>
    )
  }
  return (
    <Datepicker
      onDateSet={date => {
        console.log('date set', date)
      }}
      minPrecision="day"
      renderDayAs={CustomComponent}
      title="Demo datepicker"
    />
  )
}

() => {
  const style = {
    boxSizing: 'border-box',
    flex: '1 1 calc(100%/7 - 4px)',
    color: 'black',
    textAlign: 'center',
    padding: '0',
    fontSize: '12px',
    lineHeight: '30px',
    border: '2px dashed pink',
    margin: '2px',
  }
  const CustomComponent = ({
    onDateSet,
    date,
    isSameMonth,
    isToday,
    isSelected,
    isDisabled,
    isHighlighted,
    isWeekend,
    name,
  }) => {
    const handleClick = () => {
      console.log('date set', date)
      onDateSet(date)
    }
    return (
      <div onClick={handleClick} style={style}>
        {name.numeric}
      </div>
    )
  }
  return (
    <Datepicker
      onDateSet={date => {
        console.log('date set', date)
      }}
      minPrecision="day"
      renderDayAs={CustomComponent}
      title="Demo datepicker"
    />
  )
}

Props

belongsToSameMonth

bool

required

isSelected

bool

required

isDisabled

bool

required

isHighlighted

bool

required

isWeekend

bool

required

onDateSet

func

required

date

Class(Date)

required

isCurrent

bool

required

name

{ "numeric": "number" }

required

Wrap with custom CSS class

You can override CSS classname of Day Calendar element, see dayCalendarClassName prop.

<Datepicker
  onDateSet={date => {console.log('date set', date);}}
  minPrecision="day"
  dayCalendarClassName="your-custom-className"
  title="Demo datepicker" />

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

Wrap with custom CSS class

Props