Search code examples
reactjsreact-dates

Highlight certain days in react-dates

I have a DayPickerRangeController from react-dates, defined like this:

<DayPickerRangeController
    startDate={start}
    endDate={end}
    onDatesChange={onDatesChange}
    firstDayOfWeek={1}
    numberOfMonths={3}
    focusedInput={focusedDateInput}
    onFocusChange={e => setFocussedDateInput(e as FocusedInputShape)}
/>

I also have some API that returns a value for a set of dates. I'm trying to find a way to change the color of certain days, based on whatever the API returns.

Looking at the implementation of their themes, there doesn't seem to be a way, to change the style of certain days.

Is there something I'm missing? Is there a way to style individual days?

Solution

  • What you are looking for is the isDayHighlighted prop.

    You can find out an example on how to use it there

    If you really want to implement your own style to certain days, you can use the renderDayContents prop.

    An example is available on a github issue here

    <DayPicker
    renderDayContents={(day) => (day.day() % 6 === 5 ? ":)" : day.format('D'))}
/>