diff --git a/src/Calendar.js b/src/Calendar.js index 4ccdf147c..5d7b7baa6 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -730,6 +730,7 @@ class Calendar extends React.Component { * dateCellWrapper: MyDateCellWrapper, * timeSlotWrapper: MyTimeSlotWrapper, * timeGutterHeader: MyTimeGutterWrapper, + * timeGutterWrapper: MyTimeGutterWrapper, * resourceHeader: MyResourceHeader, * toolbar: MyToolbar, * agenda: { @@ -762,6 +763,7 @@ class Calendar extends React.Component { dayColumnWrapper: PropTypes.elementType, timeSlotWrapper: PropTypes.elementType, timeGutterHeader: PropTypes.elementType, + timeGutterWrapper: PropTypes.elementType, resourceHeader: PropTypes.elementType, toolbar: PropTypes.elementType, @@ -930,6 +932,7 @@ class Calendar extends React.Component { dateCellWrapper: NoopWrapper, weekWrapper: NoopWrapper, timeSlotWrapper: NoopWrapper, + timeGutterWrapper: NoopWrapper, }), accessors: { start: wrapAccessor(startAccessor), diff --git a/src/TimeGutter.js b/src/TimeGutter.js index 949e7e241..a2b84962b 100644 --- a/src/TimeGutter.js +++ b/src/TimeGutter.js @@ -33,6 +33,7 @@ const TimeGutter = ({ getters, gutterRef, }) => { + const { timeGutterWrapper: TimeGutterWrapper } = components const { start, end } = useMemo( () => adjustForDST({ min, max, localizer }), // eslint-disable-next-line react-hooks/exhaustive-deps @@ -81,20 +82,22 @@ const TimeGutter = ({ ) return ( -
- {slotMetrics.groups.map((grp, idx) => { - return ( - - ) - })} -
+ +
+ {slotMetrics.groups.map((grp, idx) => { + return ( + + ) + })} +
+
) } diff --git a/stories/Calendar.stories.js b/stories/Calendar.stories.js index e4aa80294..827253563 100644 --- a/stories/Calendar.stories.js +++ b/stories/Calendar.stories.js @@ -45,6 +45,20 @@ CustomTimeGutterHeader.args = { }, } +export const CustomTimeGutterWrapper = Template.bind({}) +CustomTimeGutterWrapper.storyName = 'custom TimeGutter wrapper' +CustomTimeGutterWrapper.args = { + popup: true, + events: demoEvents, + onSelectEvent: action('event selected'), + defaultDate: new Date(2015, 3, 1), + defaultView: Views.WEEK, + views: [Views.WEEK, Views.DAY], + components: { + timeGutterWrapper: customComponents.timeGutterWrapper, + }, +} + export const CustomDateCellWrapper = Template.bind({}) CustomDateCellWrapper.storyName = 'add custom dateCellWrapper' CustomDateCellWrapper.args = { diff --git a/stories/resources/customComponents.js b/stories/resources/customComponents.js index 3ce7bf632..8eaf642fe 100644 --- a/stories/resources/customComponents.js +++ b/stories/resources/customComponents.js @@ -69,6 +69,16 @@ const customComponents = { } return
{timeSlotWrapperProps.children}
}, + timeGutterWrapper: (timeGutterWrapperProps) => { + return ( +
+ {timeGutterWrapperProps.children} +
+ ) + }, } export default customComponents