React-dates: Custom highlight class

[davidmartin]

Hi,
I am wondering if it could be possible to highlight more than one day using different colors and if so how can I accomplish that?

Thanks.

[majapw]

Hi @davidmartin, there's no real way to do this right now as the only class we apply in this situation is .CalendarDay__highlighted-calendar. Can you describe your use case and why that would be necessary?

[davidmartin]

Hi @majapw, It would be necessary because I need to mark different holiday dates, such as:

• Blue days: National holiday
• Yellow days: User's holiday
• Green days: Special Days

I thought in two different ways to accomplish that:

1. Allow adding a className to the td element related to the day.
2. Allow adding a children component inside the td element related to the day.

Thanks.

[vepasto]

@davidmartin you can use renderDay function here.

<DayPicker
        ...
    renderDay={this.renderDay}
/>

and the renderDay function would be something like this

renderDay(day) {
    const holidayColor = this.getHolidayColor(day);

    return (
        <div style={{ backgroundColor: holidayColor ? holidayColor : 'white', height: '100%', color: 'black' }}>
        <span>{day.format('D')}</span>
    </div>
    );
}

[mattias800]

The typing for renderDay is wrong in the Typescript definitions.

[ljharb]

@mattias800 you should file that on the DefinitelyTyped repo; we do not write, maintain, or support TypeScript definitions.

[kdichev]

I have managed to go this far as displaying differrent colored ranges. I am using renderDayContents but I guess I might want to switch to render day?

[juanpujol]

@kdichev did you managed to make this work?

[kdichev]

@juanpujol yes, I did manage to do what I have shown on the screenshot but unfortunately I cannot find the project I was working on. Ill try and find it and post it here as soon as possible.

[nelsoneldoro]

@juanpujol you can manage days by renderDayContents prop like as following

renderDayContents?: (day: momentPropTypes.momentObj) => (string | JSX.Element)

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

[juanpujol]

Thanks @kdichev and @nelsoneldoro

[davidmartin]

Thanks !! :+1:

[kdichev]

@davidmartin I think we should close this one :)

[majapw]

Thanks for helping out, y'all! :)

[mitko993]

Hello,

I am using the renderCalendarDay prop with CustomizableCalendarDay.
How do i add styles for ::after ?
This is what I've tried so far, but nothing works:

const selectedStyles = {
background: '#590098',
border: '1px solid #590098',
color: '#fff',

after: {...},
'&:after': {...},
'::after': {...}
};

[jufghd]

@juanpujol you can manage days by renderDayContents prop like as following

renderDayContents?: (day: momentPropTypes.momentObj) => (string | JSX.Element)

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

how to change dates of different blocked dates color??