feat: time gutter position features

src/Calendar.js

@@ -689,6 +689,11 @@ class Calendar extends React.Component {
        */
       timeGutterFormat: dateFormat,
 
+      /**
+       * The position the time gutter gets rendered (left, right, both)
+       */
+      timeGutterPosition: PropTypes.oneOf(['left', 'right', 'both']),
+
       /**
        * Toolbar header format for the Month view, e.g "2015 April"
        *
@@ -1158,4 +1163,5 @@ export default uncontrollable(Calendar, {
   view: 'onView',
   date: 'onNavigate',
   selected: 'onSelectEvent',
+  timeGutterPosition: 'left',
 })

src/TimeGrid.js

@@ -200,6 +200,7 @@ export default class TimeGrid extends Component {
       showMultiDayTimes,
       longPressThreshold,
       resizable,
+      timeGutterPosition,
     } = this.props
 
     width = width || this.state.gutterWidth
@@ -238,6 +239,22 @@ export default class TimeGrid extends Component {
 
     allDayEvents.sort((a, b) => sortEvents(a, b, accessors, localizer))
 
+    const timeGutter = (
+      <TimeGutter
+        date={start}
+        ref={this.gutterRef}
+        localizer={localizer}
+        min={localizer.merge(start, min)}
+        max={localizer.merge(start, max)}
+        step={this.props.step}
+        getNow={this.props.getNow}
+        timeslots={this.props.timeslots}
+        components={components}
+        className="rbc-time-gutter"
+        getters={getters}
+      />
+    )
+
     return (
       <div
         className={clsx(
@@ -275,32 +292,24 @@ export default class TimeGrid extends Component {
           onDrillDown={this.props.onDrillDown}
           getDrilldownView={this.props.getDrilldownView}
           resizable={resizable}
+          timeGutterPosition={timeGutterPosition}
         />
         {this.props.popup && this.renderOverlay()}
         <div
           ref={this.contentRef}
           className="rbc-time-content"
           onScroll={this.handleScroll}
         >
-          <TimeGutter
-            date={start}
-            ref={this.gutterRef}
-            localizer={localizer}
-            min={localizer.merge(start, min)}
-            max={localizer.merge(start, max)}
-            step={this.props.step}
-            getNow={this.props.getNow}
-            timeslots={this.props.timeslots}
-            components={components}
-            className="rbc-time-gutter"
-            getters={getters}
-          />
+          {timeGutterPosition !== 'right' && timeGutter}
+
           {this.renderEvents(
             range,
             rangeEvents,
             rangeBackgroundEvents,
             getNow()
           )}
+
+          {timeGutterPosition !== 'left' && timeGutter}
         </div>
       </div>
     )
@@ -475,4 +484,5 @@ TimeGrid.propTypes = {
 TimeGrid.defaultProps = {
   step: 30,
   timeslots: 2,
+  timeGutterPosition: 'left',
 }

src/TimeGridHeader.js

@@ -128,6 +128,7 @@ class TimeGridHeader extends React.Component {
         resourceHeader: ResourceHeaderComponent = ResourceHeader,
       },
       resizable,
+      timeGutterPosition,
     } = this.props
 
     let style = {}
@@ -143,12 +144,14 @@ class TimeGridHeader extends React.Component {
         ref={scrollRef}
         className={clsx('rbc-time-header', isOverflowing && 'rbc-overflowing')}
       >
-        <div
-          className="rbc-label rbc-time-header-gutter"
-          style={{ width, minWidth: width, maxWidth: width }}
-        >
-          {TimeGutterHeader && <TimeGutterHeader />}
-        </div>
+        {timeGutterPosition !== 'right' && (
+          <div
+            className="rbc-label rbc-time-header-gutter-left"
+            style={{ width, minWidth: width, maxWidth: width }}
+          >
+            {TimeGutterHeader && <TimeGutterHeader />}
+          </div>
+        )}
 
         {resources.map(([id, resource], idx) => (
           <div className="rbc-time-header-content" key={id || idx}>
@@ -197,6 +200,15 @@ class TimeGridHeader extends React.Component {
             />
           </div>
         ))}
+
+        {timeGutterPosition !== 'left' && (
+          <div
+            className="rbc-label rbc-time-header-gutter-right"
+            style={{ width, minWidth: width, maxWidth: width }}
+          >
+            {TimeGutterHeader && <TimeGutterHeader />}
+          </div>
+        )}
       </div>
     )
   }

src/sass/time-column.scss

@@ -84,11 +84,20 @@
   .rbc-time-gutter,
   .rbc-time-header-gutter {
     position: sticky;
-    left: 0;
     background-color: white;
-    border-right: 1px solid $cell-border;
     z-index: 10;
-    margin-right: -1px;
+    border-left: 1px solid $cell-border;
+    margin-left: -1px;
+  }
+
+  .rbc-time-header-gutter-left {
+    @extend .rbc-time-header-gutter;
+    left: 0;
+  }
+
+  .rbc-time-header-gutter-right {
+    @extend .rbc-time-header-gutter;
+    right: 0;
   }
 
   .rbc-time-header {

src/sass/time-grid.scss

@@ -90,6 +90,7 @@
   min-width: 0;
   flex-direction: column;
   border-left: 1px solid $cell-border;
+  border-right: 1px solid $cell-border;
 
   .rbc-rtl & {
     border-left-width: 0;

stories/Calendar.stories.js

@@ -62,6 +62,22 @@ CustomTimeGutterWrapper.args = {
   },
 }
 
+export const TimeGutterPosition = Template.bind({})
+TimeGutterPosition.storyName = 'TimeGutter position - right'
+TimeGutterPosition.args = {
+  timeGutterPosition: 'right',
+  events: demoEvents,
+  onSelectEvent: action('event selected'),
+  defaultDate: new Date(2015, 3, 1),
+  defaultView: Views.WEEK,
+  views: [Views.WEEK, Views.DAY],
+}
+TimeGutterPosition.argTypes = {
+  timeGutterPosition: {
+    control: { type: 'select', options: ['left', 'right', 'both'] },
+  },
+}
+
 export const CustomDateCellWrapper = Template.bind({})
 CustomDateCellWrapper.storyName = 'add custom dateCellWrapper'
 CustomDateCellWrapper.args = {

stories/props/timeGutterPosition.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Story } from '@storybook/addon-docs'
+import LinkTo from '@storybook/addon-links/react'
+
+# timeGutterPosition
+
+- type: `string`  (left, right, both)
+- default: `left`
+
+The position the time gutter should be in the day/week views.
+
+<Story id="props--time-gutter-position" />

stories/props/timeGutterPosition.stories.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import demoEvents from '../resources/events'
+import mdx from './timeGutterPosition.mdx'
+import moment from 'moment'
+import { Calendar, Views, momentLocalizer } from '../../src'
+
+const mLocalizer = momentLocalizer(moment)
+
+export default {
+  title: 'props',
+  component: Calendar,
+  argTypes: {
+    localizer: { control: { type: null } },
+    events: { control: { type: null } },
+    defaultDate: { control: { type: null } },
+    timeGutterPosition: 'string',
+  },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}
+
+const Template = (args) => (
+  <div className="height600">
+    <Calendar {...args} />
+  </div>
+)
+
+export const TimeGutterPosition = Template.bind({})
+TimeGutterPosition.storyName = 'timeGutterPosition'
+TimeGutterPosition.args = {
+  defaultDate: new Date(2015, 3, 13),
+  defaultView: Views.WEEK,
+  timeGutterPosition: 'both',
+  events: demoEvents,
+  localizer: mLocalizer,
+}
+
+TimeGutterPosition.argTypes = {
+  timeGutterPosition: {
+    control: { type: 'select', options: ['left', 'right', 'both'] },
+  },
+}