Skip to content

An example of implementing a custom time gutter for RBC showing time zone conversions

Notifications You must be signed in to change notification settings

TomasHubelbauer/rbc-timezone-gutter

Repository files navigation

React Big Calendar Timezone Gutter

LIVE

This repository demonstrates adding time zone conversion columns into the gutter of the React Big Calendar component.

The timeGutterHeader and timeSlotWrapper components (the components prop) are is used to enable this. With timeSlotWrapper, props.resource can be either undefined or null. undefined identifies a slot belonging to the calendar gutter, null or any other value identifies a slot belonging to the calendar time grid. We add the rbc-time-header-gutter class name to our own custom gutter header so that the automatic stretching to match the gutter width is carried out by RBC as with the default calendar gutter header.