feat-create-DateRenderer-component

[niekvenlo]

As I suggested in this issue, I've created a simple DayRenderer component. On my local, this is how I'm using it:

<Calendar.Root mode="single">
    <Calendar.View>
        <Calendar.Days className={css.days}>
            <Calendar.Day className={css.day}>
                <Calendar.DayInRange />
                <Calendar.DayLabel />
                <Calendar.DayRenderer
                    render={({ dayjsDate }) => (
                        <DaysEvents date={dayjsDate} />
                    )}
                />
            </Calendar.Day>
        </Calendar.Days>
    </Calendar.View>
</Calendar>

function DaysEvents({ date }: { date: Dayjs }) {
    return <div>{date.format("YYYY-MM-DD")}</div>;
}

Note

In packages/react-composable-calendar/src/components/day-renderer.tsx I'm passing a Temporal.PlainDate to the render function, but it appears to get transformed into a dayjs date, somehow. I'm not familiar enough with the polyfill, Temporal or dayjs to explain why.
Regardless, whatever the shape of the date would be, it would be useful to be able to render content based on the date.

[vercel]

@niekvenlo is attempting to deploy a commit to the feelixe1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[feelixe]

Thanks for the pr, looks good! I'm gonna take a closer look tonight.

[niekvenlo]

An alternative approach might be to expose the useDayContext hook somehow (and maybe all context hooks). Then users can always access the date, day of the week, etc., to create custom renderers...

[feelixe]

I think both could be good, I thought I already exported the hooks.

Btw, the main branch is 1.0.0 which uses the Temporal API instead of dayjs.

Are you using 1.0.0? It's still published under the rc tag.

If you're using the 0.3.x version then I would be happy to merge another pr to add this to that version aswell. I would have to setup a new branch first tho.