Allow For Customization of a Dates Event Box

[theRealScoobaSteve]

It would be nice to have a prop that allows for the passing in of a component that controls the style of each calendar day box similar to the renderDay prop on the monthly calendar.

[zackify]

Good idea, i will try to make a pr for this in the next couple days!

[theRealScoobaSteve]

Awesome!!! Thank you.

[zackify]

So, I want to keep going with the current abstraction. Which means all I did in my PR was split out the monthly day component so that it can be replaced: #4 check it out.

Essentially this would let you make MyMonthlyBody.js in your codebase, and it would look like this:

export function MonthlyDay<DayData>({ renderDay }) {
  let { day, events } = useMonthlyBody<DayData>();
  let dayNumber = format(day, 'd');

  return (
    <div
      key={day.toISOString()}
      aria-label={`Events for day ${dayNumber}`}
      className="h-48 p-2 border-b-2 border-r-2"
    >
      <div className="flex justify-between">
        <div className="font-bold">{dayNumber}</div>
        <div className="lg:hidden block">{format(day, 'EEEE')}</div>
      </div>
      <ul className="divide-gray-200 divide-y overflow-hidden max-h-36 overflow-y-auto">
        {renderDay(events)}
      </ul>
    </div>
  );
}

You can then fully change any of the default code to your desire. The goal of this library is to mostly drop in to your app by making "MyCalendar" and composing everything. And be able to swap out any portion with your own code. Just import the required hooks for the data.

[zackify]

I have released this as 0.1.0!