Custom Day Content

The renderDayContent prop lets you replace the default day number with any React node. It receives the Temporal.PlainDate for the cell and a DayState object describing its current state.

ts

renderDayContent?: (date: Temporal.PlainDate, state: DayState) => ReactNode

If renderDayContent is not provided, the component renders the day number by default.

DayState

ts

interface DayState {
  selected: boolean      // single mode: this date === value
  inRange: boolean       // range mode: between range.start and range.end
  isRangeStart: boolean  // this date === range.start
  isRangeEnd: boolean    // this date === range.end
}

Bold selected day

tsx

<TemporalDatePicker
  value={date}
  onChange={setDate}
  renderDayContent={(d, { selected }) => (
    <span style={{ fontWeight: selected ? 800 : 400 }}>{d.day}</span>
  )}
/>

Dot indicator on Fridays

tsx

<TemporalDatePicker
  value={date}
  onChange={setDate}
  renderDayContent={(d, { selected }) => (
    <span style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
      {d.day}
      {d.dayOfWeek === 5 && (
        <span style={{
          width: 3, height: 3, borderRadius: '50%',
          background: selected ? 'currentColor' : '#38bdf8'
        }} />
      )}
    </span>
  )}
/>

Range start / end badges

tsx

<TemporalDatePicker
  mode="range"
  value={range}
  onChange={setRange}
  renderDayContent={(d, { isRangeStart, isRangeEnd }) => (
    <span style={{ position: 'relative' }}>
      {d.day}
      {isRangeStart && (
        <span style={{ position: 'absolute', top: -4, right: -4, fontSize: 8, fontWeight: 700 }}>S</span>
      )}
      {isRangeEnd && (
        <span style={{ position: 'absolute', top: -4, right: -4, fontSize: 8, fontWeight: 700 }}>E</span>
      )}
    </span>
  )}
/>

Event highlights from an external data source

tsx

const EVENTS = new Set(['2026-03-10', '2026-03-18', '2026-03-25'])

<TemporalDatePicker
  value={date}
  onChange={setDate}
  renderDayContent={(d, { selected }) => (
    <span style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
      {d.day}
      {EVENTS.has(d.toString()) && (
        <span style={{
          width: 4, height: 4, borderRadius: '50%',
          background: selected ? 'white' : '#f472b6'
        }} />
      )}
    </span>
  )}
/>