nextui icon indicating copy to clipboard operation
nextui copied to clipboard

[Feature Request] Mark dates in the calendar component

Open kjorand opened this issue 4 months ago • 2 comments

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

image

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 ...

kjorand avatar Oct 06 '24 13:10 kjorand