react-calendar icon indicating copy to clipboard operation
react-calendar copied to clipboard

feat: Tile.tsx: add a <div> element wrapper to tileContent to separate it from other nodes and enable passing down className

Open alexrah opened this issue 10 months ago • 1 comments

In the <Calendar/> component when using tileContent prop to inject multiple content inside a Tile, can be useful to have a wrapper element to separate the injected content from the default children nodes. Moreover, having a wrapper allow to customize styling by passing down classNames to it

this is an example rendered Tile.tsx

<button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" style="flex: 0 0 14.2857%; overflow: hidden; margin-inline-end: 0px;" type="button">
<abbr aria-label="February 20, 2025">20</abbr>
<!-- wrapper -->
<div class="absolute flex gap-0.5">
<!-- added by TileContent -->
<span class="rounded-full w-2 h-2 block" style="background-color: rgb(163, 29, 24);"></span>
<!-- added by TileContent -->
<span class="rounded-full w-2 h-2 block" style="background-color: rgb(219, 89, 40);"></span>
</div>
</button>

alexrah avatar Feb 18 '25 15:02 alexrah

Can someone at least provide some feedback on this? It doesn't seem like something requiring too much testing and it greatly simplify customization on tileContent

alexrah avatar Apr 14 '25 09:04 alexrah