react-calendar
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
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>
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