DatePicker Calendar control to allow custom text and color highligting

[kumardeepakr3]

Describe the feature that you would like added

The DatePicker Calendar control should allow for addition of text and color to the calendar dates.

What component or utility would this be added to

I'm from FlightBooking team in Bing. We're looking for adding extra feature of showing fares for booking on our calendar (uses fluent-ui). There are hundreds of websites out there dedicated to booking tickets for bus, flights, trains. But each one has it's own custom implementation of DatePicker because there is no standard or open-sourced libarary available for this.

Have you discussed this feature with our team, and if so, who

NO

Additional context/screenshots

Here is a screenshot from another website and we're looking for something similar.

[paulgildea]

@lorejoh12 I'll connect you with @kumardeepakr3 to see if this is something on your roadmap for the component.

[lorejoh12]

This is an interesting question. The date-time's Calendar component does actually expose a property customDayCellRef that can sort of achieve this. Rather than expose a bunch of properties for individual things like color or text, we wanted a single property like a custom onRender() that would allow users to customize the component. However, that ended up being slightly tricky, because there are a lot of accessibility properties and DOM events that the div needs to have attached to it, that we didn't want consumers to have to worry about. So we ended up just exporting a ref callback, and the consumer can use that callback to do whatever they want to the ref. If you want to apply a custom style to the div or inject a child, you can do that.

See here for an example: https://github.com/microsoft/fluentui/blob/f9ca45d012d2e77eea728e19651b144452562004/packages/date-time/src/components/Calendar/CalendarPage.tsx#L162-L181 it's not as nice looking as being able to have a property that injects custom text, but gives you a lot more control for custom scenarios.

The one comment I would make here is that in your screenshots, you appear to need a LOT of room for showing this extra text. This DatePicker component was not designed to be resized easily, unfortunately, so while the text injection is pretty straightforward, the resizing to allow for room for that text might not be.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.