From e797ab3a6507bd0a9bb98971f693cc86e42cdc3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kamil=20D=C4=99bicki?= <14319596+kamildebicki@users.noreply.github.com> Date: Fri, 29 Jan 2021 14:05:17 +0100 Subject: [PATCH] feat: add background events feature (#1851) * feat: Add background events * Clean up time grid background event * Update time grid background event name * Add storybook example * Fix typo in documentation * Remove unused props in documentation * Clean up Background Events feature in preparation for merge * Remove package-lock.json * Code clean up * #1727 Add better background events example and address code review * Remove changes not related to the background event feature * Fix background event story * Fix background event width calculation Co-authored-by: rrjoson Co-authored-by: Jeremy Mauzy --- examples/App.js | 3 +++ examples/backgroundEvents.js | 8 ++++++ examples/demos/backgroundEvents.js | 24 +++++++++++++++++ examples/events.js | 22 ++++++++++++++-- src/Calendar.js | 31 ++++++++++++++++++++++ src/DayColumn.js | 11 +++++--- src/TimeGrid.js | 33 +++++++++++++++++++++--- src/TimeGridEvent.js | 41 +++++++++++++++++++++--------- src/less/time-column.less | 21 ++++++++++++--- src/less/variables.less | 2 ++ src/sass/time-column.scss | 5 ++++ stories/Calendar.js | 11 +++++++- stories/helpers/index.js | 15 +++++++++++ 13 files changed, 202 insertions(+), 25 deletions(-) create mode 100644 examples/backgroundEvents.js create mode 100644 examples/demos/backgroundEvents.js diff --git a/examples/App.js b/examples/App.js index d37721a18..7a57d90f8 100644 --- a/examples/App.js +++ b/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, diff --git a/examples/backgroundEvents.js b/examples/backgroundEvents.js new file mode 100644 index 000000000..eeb5ac57d --- /dev/null +++ b/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), + }, +] diff --git a/examples/demos/backgroundEvents.js b/examples/demos/backgroundEvents.js new file mode 100644 index 000000000..c163afd7d --- /dev/null +++ b/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 }) => ( + +) + +export default Basic diff --git a/examples/events.js b/examples/events.js index 08e377027..90aaa4b4c 100644 --- a/examples/events.js +++ b/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', diff --git a/src/Calendar.js b/src/Calendar.js index 81b75f9d4..94f703426 100644 --- a/src/Calendar.js +++ b/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. @@ -783,6 +806,7 @@ class Calendar extends React.Component { constructor(...args) { super(...args) + this.state = { context: this.getContext(this.props), } @@ -801,6 +825,7 @@ class Calendar extends React.Component { resourceIdAccessor, resourceTitleAccessor, eventPropGetter, + backgroundEventPropGetter, slotPropGetter, slotGroupPropGetter, dayPropGetter, @@ -820,6 +845,9 @@ class Calendar extends React.Component { getters: { eventProp: (...args) => (eventPropGetter && eventPropGetter(...args)) || {}, + backgroundEventProp: (...args) => + (backgroundEventPropGetter && backgroundEventPropGetter(...args)) || + {}, slotProp: (...args) => (slotPropGetter && slotPropGetter(...args)) || {}, slotGroupProp: (...args) => @@ -828,6 +856,7 @@ class Calendar extends React.Component { }, components: defaults(components[view] || {}, omit(components, names), { eventWrapper: NoopWrapper, + backgroundEventWrapper: NoopWrapper, eventContainerWrapper: NoopWrapper, dateCellWrapper: NoopWrapper, weekWrapper: NoopWrapper, @@ -885,6 +914,7 @@ class Calendar extends React.Component { view, toolbar, events, + backgroundEvents = [], style, className, elementProps, @@ -934,6 +964,7 @@ class Calendar extends React.Component {
- {this.renderEvents()} + {this.renderEvents({ + events: this.props.backgroundEvents, + isBackgroundEvent: true, + })} + {this.renderEvents({ events: this.props.events })}
@@ -174,9 +178,8 @@ class DayColumn extends React.Component { ) } - renderEvents = () => { + renderEvents = ({ events, isBackgroundEvent }) => { let { - events, rtl, selected, accessors, @@ -233,6 +236,7 @@ class DayColumn extends React.Component { selected={isSelected(event, selected)} onClick={e => this._select(event, e)} onDoubleClick={e => this._doubleClick(event, e)} + isBackgroundEvent={isBackgroundEvent} onKeyPress={e => this._keyPress(event, e)} resizable={resizable} /> @@ -382,6 +386,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, diff --git a/src/TimeGrid.js b/src/TimeGrid.js index 8911ca61d..38676bf3c 100644 --- a/src/TimeGrid.js +++ b/src/TimeGrid.js @@ -105,7 +105,7 @@ export default class TimeGrid extends Component { }) } - renderEvents(range, events, now) { + renderEvents(range, events, backgroundEvents, now) { let { min, max, @@ -117,6 +117,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) => { @@ -129,6 +130,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 ( ) @@ -151,6 +164,7 @@ export default class TimeGrid extends Component { render() { let { events, + backgroundEvents, range, width, rtl, @@ -176,7 +190,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)) { @@ -195,6 +210,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 ( @@ -246,7 +267,12 @@ export default class TimeGrid extends Component { className="rbc-time-gutter" getters={getters} /> - {this.renderEvents(range, rangeEvents, getNow())} + {this.renderEvents( + range, + rangeEvents, + rangeBackgroundEvents, + getNow() + )} ) @@ -311,6 +337,7 @@ export default class TimeGrid extends Component { TimeGrid.propTypes = { events: PropTypes.array.isRequired, + backgroundEvents: PropTypes.array.isRequired, resources: PropTypes.array, step: PropTypes.number, diff --git a/src/TimeGridEvent.js b/src/TimeGridEvent.js index c50a06ab2..eaf7f9adf 100644 --- a/src/TimeGridEvent.js +++ b/src/TimeGridEvent.js @@ -20,6 +20,7 @@ function TimeGridEvent(props) { getters, onClick, onDoubleClick, + isBackgroundEvent, onKeyPress, components: { event: Event, eventWrapper: EventWrapper }, } = props @@ -40,29 +41,45 @@ function TimeGridEvent(props) { , ] + const eventStyle = isBackgroundEvent + ? { + ...userProps.style, + top: stringifyPercent(top), + height: stringifyPercent(height), + // Adding 10px to take events container right margin into account + width: `calc(${width} + 10px)`, + [rtl ? 'right' : 'left']: stringifyPercent(Math.max(0, xOffset)), + } + : { + ...userProps.style, + top: stringifyPercent(top), + width: stringifyPercent(width), + height: stringifyPercent(height), + [rtl ? 'right' : 'left']: stringifyPercent(xOffset), + } + return (
{inner}
diff --git a/src/less/time-column.less b/src/less/time-column.less index c04745c26..5a458cba1 100644 --- a/src/less/time-column.less +++ b/src/less/time-column.less @@ -1,6 +1,5 @@ @import './variables.less'; - .rbc-time-column { display: flex; flex-direction: column; @@ -11,7 +10,6 @@ } } - .rbc-timeslot-group { border-bottom: 1px solid @cell-border; min-height: 40px; @@ -56,6 +54,21 @@ position: absolute; } + .rbc-background-event { + border: none; + box-shadow: none; + margin: 0; + padding: @event-padding; + background-color: @background-event-bg; + background-color: red; + border-radius: 0; + color: @event-color; + cursor: pointer; + width: 100%; + text-align: left; + opacity: 0.5; + } + .rbc-event-label { flex: none; padding-right: 5px; @@ -106,10 +119,10 @@ } .rbc-header, - .rbc-day-bg, { + .rbc-day-bg { width: 140px; // min-width: 0; - flex: 1 1 0; + flex: 1 1 0; flex-basis: 0 px; } } diff --git a/src/less/variables.less b/src/less/variables.less index 87a54c074..0689bdb65 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -22,6 +22,8 @@ @event-padding: 2px 5px; @event-zindex: 4; +@background-event-bg: lighten(#3174ad, 20%); + @btn-color: #373a3c; @btn-bg: #fff; @btn-border: #ccc; diff --git a/src/sass/time-column.scss b/src/sass/time-column.scss index 75328c7c5..fce2d3eb4 100644 --- a/src/sass/time-column.scss +++ b/src/sass/time-column.scss @@ -54,6 +54,11 @@ overflow: hidden; position: absolute; } + + .rbc-background-event { + @extend .rbc-event; + opacity: 0.75; + } .rbc-event-label { flex: none; diff --git a/stories/Calendar.js b/stories/Calendar.js index e55dd7dac..06f3ca7a6 100644 --- a/stories/Calendar.js +++ b/stories/Calendar.js @@ -10,7 +10,7 @@ import demoEvents from '../examples/events' import createEvents from './helpers/createEvents' import customComponents from './helpers/customComponents' -import { events, Views, Calendar } from './helpers' +import { events, backgroundEvents, Calendar, Views } from './helpers' storiesOf('Big Calendar', module) .add('demo', () => ( @@ -207,3 +207,12 @@ storiesOf('Big Calendar', module) /> ) }) + .add('add background event', () => { + return ( + + ) + }) diff --git a/stories/helpers/index.js b/stories/helpers/index.js index f40ebf09d..047dbd3e2 100644 --- a/stories/helpers/index.js +++ b/stories/helpers/index.js @@ -113,3 +113,18 @@ export const events = [ allDay: false, }, ] + +export const backgroundEvents = [ + { + title: 'test background event', + start: moment() + .startOf('day') + .add(2, 'hours') + .toDate(), + end: moment() + .startOf('day') + .add(12, 'hours') + .toDate(), + allDay: false, + }, +]