[Feature Request] Mark dates in the calendar component

[kjorand]

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

[linear[bot]]

ENG-1431 [Feature Request] Mark dates in the calendar component

[joshclement0]

I would also like to do something like this: With a custom component behind the number

it seems these two problems might be separate but solved in the same manner. i.e. a callback that is passed down from the user to add a class name or component based on the specific day (d?:Date) => style or (d:Date) => html