nextui
nextui copied to clipboard
[Feature Request] Mark dates in the calendar component
Is your feature request related to a problem? Please describe.
Wanted to use the calendar to show availability. BUT ... still be able to select any date to see what's going on on that day.
Describe the solution you'd like
An additionnal prop something like "isSpecialDate" => then we could add some custom formating to the date in the calendar, either strikethrough like unavailable ... or maybe with a faded background or somthing (already more generic feature than strikethroug) ... OR even better and most generic : a "dateFormater" prop to which we could pass a callback (just like isUnavailable) but which callback should return some specific formatting like
{
strikethrough?: boolean,
color?: DateProps["color"], // or similar
faded?: boolean, // or whatever other appearance is easy and makes sense to offer
// ... other ???
}
... or actually just returning an array or string of classNames would be great already
Would be most generic and even allow the callback to differentiate occupency let's say :
- "normal" => available whole day => {}
- "completely unavailable" => {strikethrough: true, faded: true}
- "partially unavailable" => {faded: true}
- "special" => {color: "warning"}
- ....
Describe alternatives you've considered
Already described as first part above ... Still believe the last and most generic solution would be best ! (my use-case actually involves partial unavailability and complete unavailability)
Screenshots or Videos
Here I just edited the example from the docs manually with the developper tools of the browser, adding text-warning class ... works pretty well ...
And huh ... I'll gladly answer questions if anything is unclear ... but right now I don't see anything else ...