Add background events feature

CHANGELOG.md

@@ -1,25 +1,19 @@
 ## [0.22.1](https://github.com/intljusticemission/react-big-calendar/compare/v0.22.0...v0.22.1) (2019-09-13)
 
-
 ### Bug Fixes
 
-* add new method to get correct time indicator top position | fixes [#1396](https://github.com/intljusticemission/react-big-calendar/issues/1396) ([#1447](https://github.com/intljusticemission/react-big-calendar/issues/1447)) ([1cf0205](https://github.com/intljusticemission/react-big-calendar/commit/1cf0205))
-* drag cancelation for month view ([#1322](https://github.com/intljusticemission/react-big-calendar/issues/1322)) ([9c81e9e](https://github.com/intljusticemission/react-big-calendar/commit/9c81e9e))
-* invalid prop-types. ([#1435](https://github.com/intljusticemission/react-big-calendar/issues/1435)) ([61e1a1e](https://github.com/intljusticemission/react-big-calendar/commit/61e1a1e))
-* update time indicator position if max prop changes ([#1379](https://github.com/intljusticemission/react-big-calendar/issues/1379)) ([ac945b7](https://github.com/intljusticemission/react-big-calendar/commit/ac945b7))
-* use fixed date arithmetic lib and move bt-sass to devdepen… ([#1374](https://github.com/intljusticemission/react-big-calendar/issues/1374)) ([b223a61](https://github.com/intljusticemission/react-big-calendar/commit/b223a61))
-
+- add new method to get correct time indicator top position | fixes [#1396](https://github.com/intljusticemission/react-big-calendar/issues/1396) ([#1447](https://github.com/intljusticemission/react-big-calendar/issues/1447)) ([1cf0205](https://github.com/intljusticemission/react-big-calendar/commit/1cf0205))
+- drag cancellation for month view ([#1322](https://github.com/intljusticemission/react-big-calendar/issues/1322)) ([9c81e9e](https://github.com/intljusticemission/react-big-calendar/commit/9c81e9e))
+- invalid prop-types. ([#1435](https://github.com/intljusticemission/react-big-calendar/issues/1435)) ([61e1a1e](https://github.com/intljusticemission/react-big-calendar/commit/61e1a1e))
+- update time indicator position if max prop changes ([#1379](https://github.com/intljusticemission/react-big-calendar/issues/1379)) ([ac945b7](https://github.com/intljusticemission/react-big-calendar/commit/ac945b7))
+- use fixed date arithmetic lib and move bt-sass to devdepen… ([#1374](https://github.com/intljusticemission/react-big-calendar/issues/1374)) ([b223a61](https://github.com/intljusticemission/react-big-calendar/commit/b223a61))
 
 ### Features
 
-* [#1390](https://github.com/intljusticemission/react-big-calendar/issues/1390) use en dashes in ranges ([#1391](https://github.com/intljusticemission/react-big-calendar/issues/1391)) ([7619e59](https://github.com/intljusticemission/react-big-calendar/commit/7619e59))
-* added continuesPrior and continuesAfter props to Event component ([#1201](https://github.com/intljusticemission/react-big-calendar/issues/1201)) ([74a2233](https://github.com/intljusticemission/react-big-calendar/commit/74a2233))
-* upgrade react-overlays ([#1421](https://github.com/intljusticemission/react-big-calendar/issues/1421)) ([9117549](https://github.com/intljusticemission/react-big-calendar/commit/9117549))
-* **dnd:** add preview of an item inside cell while dragging ([#1369](https://github.com/intljusticemission/react-big-calendar/issues/1369)) ([ac715f8](https://github.com/intljusticemission/react-big-calendar/commit/ac715f8))
-
-
-
-
+- [#1390](https://github.com/intljusticemission/react-big-calendar/issues/1390) use en dashes in ranges ([#1391](https://github.com/intljusticemission/react-big-calendar/issues/1391)) ([7619e59](https://github.com/intljusticemission/react-big-calendar/commit/7619e59))
+- added continuesPrior and continuesAfter props to Event component ([#1201](https://github.com/intljusticemission/react-big-calendar/issues/1201)) ([74a2233](https://github.com/intljusticemission/react-big-calendar/commit/74a2233))
+- upgrade react-overlays ([#1421](https://github.com/intljusticemission/react-big-calendar/issues/1421)) ([9117549](https://github.com/intljusticemission/react-big-calendar/commit/9117549))
+- **dnd:** add preview of an item inside cell while dragging ([#1369](https://github.com/intljusticemission/react-big-calendar/issues/1369)) ([ac715f8](https://github.com/intljusticemission/react-big-calendar/commit/ac715f8))
 
 ## 0.22.0 (2019-06-18)
 
@@ -40,7 +34,7 @@
 - docs: update docs and examples with named exports (#1352) ([f478be0](https://github.com/intljusticemission/react-big-calendar/commit/f478be0)), closes [#1352](https://github.com/intljusticemission/react-big-calendar/issues/1352)
 - docs(dnd): remove deprecated comment about `react-dnd` (#1323) ([4d933c1](https://github.com/intljusticemission/react-big-calendar/commit/4d933c1)), closes [#1323](https://github.com/intljusticemission/react-big-calendar/issues/1323)
 - feat: provide named exports api (#1348) ([4e09704](https://github.com/intljusticemission/react-big-calendar/commit/4e09704)), closes [#1348](https://github.com/intljusticemission/react-big-calendar/issues/1348)
-- feat: redeclared all sass variables as !default (#1321) ([c4f09cd](https://github.com/intljusticemission/react-big-calendar/commit/c4f09cd)), closes [#1321](https://github.com/intljusticemission/react-big-calendar/issues/1321)
+- feat: re-declared all sass variables as !default (#1321) ([c4f09cd](https://github.com/intljusticemission/react-big-calendar/commit/c4f09cd)), closes [#1321](https://github.com/intljusticemission/react-big-calendar/issues/1321)
 - feat: use lodash-es for esm bundle (#1350) ([fb0fe5e](https://github.com/intljusticemission/react-big-calendar/commit/fb0fe5e)), closes [#1350](https://github.com/intljusticemission/react-big-calendar/issues/1350)
 - Feat: expose date localizer (#1347) ([5d93c9d](https://github.com/intljusticemission/react-big-calendar/commit/5d93c9d)), closes [#1347](https://github.com/intljusticemission/react-big-calendar/issues/1347)
 

README.md

@@ -115,7 +115,6 @@ const MyCalendar = props => (
 Out of the box, you can include the compiled CSS files and be up and running. But, sometimes, you may want to style
 Big Calendar to match your application styling. For this reason, SASS files are included with Big Calendar.
 
-
 ```
   @import 'react-big-calendar/lib/sass/styles';
   @import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD

examples/App.js

@@ -16,6 +16,7 @@ import './prism.scss'
 import Card from './Card'
 import ExampleControlSlot from './ExampleControlSlot'
 import Basic from './demos/basic'
+import BackgroundEvents from './demos/backgroundEvents'
 import Selectable from './demos/selectable'
 import CreateEventWithNoOverlap from './demos/createEventWithNoOverlap'
 import Cultures from './demos/cultures'
@@ -44,6 +45,7 @@ const EXAMPLES = {
   timeslots: 'Custom Time Grids',
   rendering: 'Customized Component Rendering',
   customView: 'Custom Calendar Views',
+  backgroundEvents: 'Background Events',
   resource: 'Resource Scheduling',
   dnd: 'Addon: Drag and drop',
   dndresource: 'Resource Drag and drop',
@@ -74,6 +76,7 @@ class Example extends React.Component {
     let selected = this.state.selected
     let Current = {
       basic: Basic,
+      backgroundEvents: BackgroundEvents,
       selectable: Selectable,
       cultures: Cultures,
       popup: Popup,

examples/backgroundEvents.js

@@ -0,0 +1,8 @@
+export default [
+  {
+    id: 0,
+    title: 'Available for Clients',
+    start: new Date(2015, 3, 13, 6),
+    end: new Date(2015, 3, 13, 18),
+  },
+]

examples/demos/backgroundEvents.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Calendar, Views } from 'react-big-calendar'
+import events from '../events'
+import backgroundEvents from '../backgroundEvents'
+import * as dates from '../../src/utils/dates'
+
+let allViews = Object.keys(Views).map(k => Views[k])
+
+let Basic = ({ localizer }) => (
+  <Calendar
+    events={events}
+    defaultView={Views.DAY}
+    views={allViews}
+    step={60}
+    showMultiDayTimes
+    max={dates.add(dates.endOf(new Date(2015, 17, 1), 'day'), -1, 'hours')}
+    defaultDate={new Date(2015, 3, 13)}
+    localizer={localizer}
+    backgroundEvents={backgroundEvents}
+    dayLayoutAlgorithm={'no-overlap'}
+  />
+)
+
+export default Basic

examples/events.js

@@ -77,10 +77,28 @@ export default [
   },
   {
     id: 11,
-    title: 'Birthday Party',
-    start: new Date(2015, 3, 13, 7, 0, 0),
+    title: 'Planning Meeting with Paige',
+    start: new Date(2015, 3, 13, 8, 0, 0),
     end: new Date(2015, 3, 13, 10, 30, 0),
   },
+  {
+    id: 11.1,
+    title: 'Inconvenient Conference Call',
+    start: new Date(2015, 3, 13, 9, 30, 0),
+    end: new Date(2015, 3, 13, 12, 0, 0),
+  },
+  {
+    id: 11.2,
+    title: "Project Kickoff - Lou's Shoes",
+    start: new Date(2015, 3, 13, 11, 30, 0),
+    end: new Date(2015, 3, 13, 14, 0, 0),
+  },
+  {
+    id: 11.3,
+    title: 'Quote Follow-up - Tea by Tina',
+    start: new Date(2015, 3, 13, 15, 30, 0),
+    end: new Date(2015, 3, 13, 16, 0, 0),
+  },
   {
     id: 12,
     title: 'Late Night Event',

src/Calendar.js

@@ -112,6 +112,29 @@ class Calendar extends React.Component {
      */
     events: PropTypes.arrayOf(PropTypes.object),
 
+    /**
+     * An array of background event objects to display on the calendar. Background
+     * Events behave similarly to Events but are not factored into Event overlap logic,
+     * allowing them to sit behind any Events that may occur during the same period.
+     * Background Events objects can be any shape, as long as the Calendar knows how to
+     * retrieve the following details of the event:
+     *
+     *  - start time
+     *  - end time
+     *
+     * Each of these properties can be customized or generated dynamically by
+     * setting the various "accessor" props. Without any configuration the default
+     * event should look like:
+     *
+     * ```js
+     * BackgroundEvent {
+     *   start: Date,
+     *   end: Date,
+     * }
+     * ```
+     */
+    backgroundEvents: PropTypes.arrayOf(PropTypes.object),
+
     /**
      * Accessor for the event title, used to display event information. Should
      * resolve to a `renderable` value.
@@ -490,19 +513,10 @@ class Calendar extends React.Component {
      * position may break the calendar in unexpected ways.
      *
      * ```js
-     * (date: Date, resourceId: (number|string)) => { className?: string, style?: Object }
+     * () => { style?: Object }
      * ```
      */
-	slotPropGetter: PropTypes.func,
-
-	/**
-	 * Optionally provide a function that returns an object of props to be applied 
-	 * to the time-slot group node. Useful to dynamically change the sizing of time nodes.
-	 * ```js
-	 * () => { style?: Object }
-	 * ```
-	 */
-	slotGroupPropGetter: PropTypes.func,
+    slotGroupPropGetter: PropTypes.func,
 
     /**
      * Optionally provide a function that returns an object of className or style props
@@ -766,6 +780,7 @@ class Calendar extends React.Component {
 
   constructor(...args) {
     super(...args)
+
     this.state = {
       context: this.getContext(this.props),
     }
@@ -784,8 +799,9 @@ class Calendar extends React.Component {
     resourceIdAccessor,
     resourceTitleAccessor,
     eventPropGetter,
-	slotPropGetter,
-	slotGroupPropGetter,
+    backgroundEventPropGetter,
+    slotPropGetter,
+    slotGroupPropGetter,
     dayPropGetter,
     view,
     views,
@@ -803,14 +819,18 @@ class Calendar extends React.Component {
       getters: {
         eventProp: (...args) =>
           (eventPropGetter && eventPropGetter(...args)) || {},
+        backgroundEventProp: (...args) =>
+          (backgroundEventPropGetter && backgroundEventPropGetter(...args)) ||
+          {},
         slotProp: (...args) =>
-		  (slotPropGetter && slotPropGetter(...args)) || {},
-		slotGroupProp: (...args) =>
-		  (slotGroupPropGetter && slotGroupPropGetter(...args)) || {},
+          (slotPropGetter && slotPropGetter(...args)) || {},
+        slotGroupProp: (...args) =>
+          (slotGroupPropGetter && slotGroupPropGetter(...args)) || {},
         dayProp: (...args) => (dayPropGetter && dayPropGetter(...args)) || {},
       },
       components: defaults(components[view] || {}, omit(components, names), {
         eventWrapper: NoopWrapper,
+        backgroundEventWrapper: NoopWrapper,
         eventContainerWrapper: NoopWrapper,
         dateCellWrapper: NoopWrapper,
         weekWrapper: NoopWrapper,
@@ -868,6 +888,7 @@ class Calendar extends React.Component {
       view,
       toolbar,
       events,
+      backgroundEvents = [],
       style,
       className,
       elementProps,
@@ -917,6 +938,7 @@ class Calendar extends React.Component {
         <View
           {...props}
           events={events}
+          backgroundEvents={backgroundEvents}
           date={current}
           getNow={getNow}
           length={length}

src/DayColumn.js

@@ -155,7 +155,11 @@ class DayColumn extends React.Component {
           slotMetrics={slotMetrics}
         >
           <div className={clsx('rbc-events-container', rtl && 'rtl')}>
-            {this.renderEvents()}
+            {this.renderEvents({
+              events: this.props.backgroundEvents,
+              isBackgroundEvent: true,
+            })}
+            {this.renderEvents({ events: this.props.events })}
           </div>
         </EventContainer>
 
@@ -174,9 +178,8 @@ class DayColumn extends React.Component {
     )
   }
 
-  renderEvents = () => {
+  renderEvents = ({ events, isBackgroundEvent }) => {
     let {
-      events,
       rtl,
       selected,
       accessors,
@@ -232,6 +235,7 @@ class DayColumn extends React.Component {
           selected={isSelected(event, selected)}
           onClick={e => this._select(event, e)}
           onDoubleClick={e => this._doubleClick(event, e)}
+          isBackgroundEvent={isBackgroundEvent}
         />
       )
     })
@@ -375,6 +379,7 @@ class DayColumn extends React.Component {
 
 DayColumn.propTypes = {
   events: PropTypes.array.isRequired,
+  backgroundEvents: PropTypes.array.isRequired,
   step: PropTypes.number.isRequired,
   date: PropTypes.instanceOf(Date).isRequired,
   min: PropTypes.instanceOf(Date).isRequired,

src/TimeGrid.js

@@ -104,7 +104,7 @@ export default class TimeGrid extends Component {
     })
   }
 
-  renderEvents(range, events, now) {
+  renderEvents(range, events, backgroundEvents, now) {
     let {
       min,
       max,
@@ -116,6 +116,7 @@ export default class TimeGrid extends Component {
 
     const resources = this.memoizedResources(this.props.resources, accessors)
     const groupedEvents = resources.groupEvents(events)
+    const groupedBackgroundEvents = resources.groupEvents(backgroundEvents)
 
     return resources.map(([id, resource], i) =>
       range.map((date, jj) => {
@@ -128,6 +129,17 @@ export default class TimeGrid extends Component {
           )
         )
 
+        let daysBackgroundEvents = (
+          groupedBackgroundEvents.get(id) || []
+        ).filter(event =>
+          dates.inRange(
+            date,
+            accessors.start(event),
+            accessors.end(event),
+            'day'
+          )
+        )
+
         return (
           <DayColumn
             {...this.props}
@@ -140,6 +152,7 @@ export default class TimeGrid extends Component {
             key={i + '-' + jj}
             date={date}
             events={daysEvents}
+            backgroundEvents={daysBackgroundEvents}
             dayLayoutAlgorithm={dayLayoutAlgorithm}
           />
         )
@@ -150,6 +163,7 @@ export default class TimeGrid extends Component {
   render() {
     let {
       events,
+      backgroundEvents,
       range,
       width,
       rtl,
@@ -174,7 +188,8 @@ export default class TimeGrid extends Component {
     this.slots = range.length
 
     let allDayEvents = [],
-      rangeEvents = []
+      rangeEvents = [],
+      rangeBackgroundEvents = []
 
     events.forEach(event => {
       if (inRange(event, start, end, accessors)) {
@@ -193,6 +208,12 @@ export default class TimeGrid extends Component {
       }
     })
 
+    backgroundEvents.forEach(event => {
+      if (inRange(event, start, end, accessors)) {
+        rangeBackgroundEvents.push(event)
+      }
+    })
+
     allDayEvents.sort((a, b) => sortEvents(a, b, accessors))
 
     return (
@@ -242,7 +263,12 @@ export default class TimeGrid extends Component {
             className="rbc-time-gutter"
             getters={getters}
           />
-          {this.renderEvents(range, rangeEvents, getNow())}
+          {this.renderEvents(
+            range,
+            rangeEvents,
+            rangeBackgroundEvents,
+            getNow()
+          )}
         </div>
       </div>
     )
@@ -307,6 +333,7 @@ export default class TimeGrid extends Component {
 
 TimeGrid.propTypes = {
   events: PropTypes.array.isRequired,
+  backgroundEvents: PropTypes.array.isRequired,
   resources: PropTypes.array,
 
   step: PropTypes.number,