- {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,
@@ -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,
diff --git a/src/TimeGrid.js b/src/TimeGrid.js
index 84a00436d..110292a64 100644
--- a/src/TimeGrid.js
+++ b/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 (
{inner}
diff --git a/src/TimeSlotGroup.js b/src/TimeSlotGroup.js
index fff057d30..017a3bc24 100644
--- a/src/TimeSlotGroup.js
+++ b/src/TimeSlotGroup.js
@@ -14,7 +14,7 @@ export default class TimeSlotGroup extends Component {
components: { timeSlotWrapper: Wrapper = BackgroundWrapper } = {},
} = this.props
- const groupProps = getters ? getters.slotGroupProp() : {}
+ const groupProps = getters ? getters.slotGroupProp() : {}
return (
{group.map((value, idx) => {
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/localizer.js b/src/localizer.js
index ec97fd129..e88e2f624 100644
--- a/src/localizer.js
+++ b/src/localizer.js
@@ -51,7 +51,8 @@ export function mergeWithDefaults(
...localizer,
messages,
startOfWeek: () => localizer.startOfWeek(culture),
- format: (value, format) =>
- localizer.format(value, formats[format] || format, culture),
+ format: (value, format) => {
+ return localizer.format(value, formats[format] || format, culture)
+ },
}
}
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..0472614bc 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,
+ },
+]