This is an exploratory repository where I try to set up the React Big Calendar component to display a twelve hour clock in the week view.

You can view the compiled app at GitHub Pages. It is served from the docs directory which is just the build directory from CRA's npm run build renamed so that it works with GitHub Pages without having to have the artifacts in the repository directory root.

This being an exploratory repository, success is not guaranteed, I am putting down my notes as I go about figuring this out. If you care only for the outcome, scroll all the way down/

To install RBC, do:

npm install react-big-calendar moment --save
npm install @types/react-big-calendar --save-dev

Next step is to pull the calendar stylesheet, set up the Moment localizer and the calendar.

Using the min and max properties it seems to be possible to cap the start and end time of all of the calendar days at once. The calendar seems to only care about the time portion and doesn't care about the date. Initially I set it up so that the min date was the first day in the week view and the max date was the last day in the week view, but that proved unnecessary.

This of course means that we cannot, as far as the current RBC API goes, have a week calendar starting at Monday noon and ending at Sunday noon. That would collapse the calendar to nothing as the difference between noon and noon only time-wise is zero.

Now is the point where I realize I misunderstood the requirements, it was not about trimming the calendar to a less than 24 hour range, but about flipping between a 12 and 24 hour clock display in the clock column and ensuring the calendar scrolls and doesn't cause its parent container height to grow to accomodate all of its height.

This repository will thus serve as an example of trimming the RBC timegrid range in the week view no one asked for on needs probably.