Add background events feature #1727

jmauzy · 2020-08-13T22:17:14Z

Picking this up from #1161. We've forked this and believe it would still make a good feature. The previous PR was pretty stale, but conflicts should be resolved and updated examples are added.

Background events behave like standard events with respect to event handlers and titles/labels. The opacity of background events was lowered to .75 for more distinction.

A couple potential outstanding UI/UX issues:

There is currently no display for background events in monthly or agenda view. Our current use case doesn't require this and we can't think of a better option for display than listing it in a similar manner as a standard event, which may be confusing.
If a standard event overlaps the start time of a background event, the background event's label will be hidden.

If these are immediate needs for this feature, I'm happy to discuss potential solutions.

jquense · 2020-08-17T14:47:55Z

src/TimeGridEvent.js

+        height: stringifyPercent(height),
+        width: `calc(${width}% + 10px)`,
+        [rtl ? 'right' : 'left']: `${Math.max(0, xOffset)}%`,
+        opacity: 0.75,


this should be done via CSS so it's easy to override

jquense

this looks good except that I'm not sure how background events are different than any other events, it's not super clear what the expected difference is supposed to be. What do you expect to happen if there are overlapping bg events?

jquense · 2020-08-17T14:48:47Z

src/TimeGridEvent.js

        title={
          tooltip
            ? (typeof label === 'string' ? label + ': ' : '') + tooltip
            : undefined
        }
        className={clsx('rbc-event', className, userProps.className, {
+          'rbc-background-event': isBackgroundEvent,


hmm maybe it should be isBackgroundEvent ? 'rbc-background-event' : 'rbc-event' should give a bit more flexibility for styling, wdt?

jquense · 2020-08-17T14:49:55Z

src/Calendar.js

@@ -112,6 +112,27 @@ class Calendar extends React.Component {
     */
    events: PropTypes.arrayOf(PropTypes.object),

+    /**
+     * An array of background event objects to display on the calendar. B events objects


can we describe what a background event is and how it's distinct from any other type of event?

jquense · 2020-08-17T14:50:37Z

src/TimeGridEvent.js

+  const eventStyle = isBackgroundEvent
+    ? {
+        ...userProps.style,
+        top: `${top}%`,


reuse stringifyPercent

…view

jmauzy · 2020-08-17T16:46:15Z

Thanks for taking the time to look this over! In addition to updating the prop description, I went ahead and updated the Background Events example to something more demonstrative of the behavior:

Technical differences: Background Events are not factored in when Events calculate their collision behavior and do not affect their layout.

Practical differences: Background Events allow the user to add a second 'class' of events that are more informational.

Common applications and use cases: Appointment availability vs scheduling, employee shifts vs tasks.

Currently background events that collide will just sit on top of each other. I can't really think of a more clever way to handle this from a UI perspective, and this would be a rare edge case in most (all?) of the use cases I can come up with. I'm happy to discuss solutions, though.

vAskitsa · 2020-09-12T12:56:46Z

This would be very nice feature.
In my case, whole day is filled by events and i have constantly overlapping situations whose make my view very ugly (i have lot of content in cell's so overlapping make those cell's unreadable). Background event's would fit for my case perfectly.

KhaledMohamedP · 2020-10-13T14:12:40Z

This looks great, thanks @jmauzy for all the work. Can we test this somewhere?

threepears · 2020-10-20T16:27:18Z

Was halfway through building something like this myself when I found this ticket ... would love to have this feature! Appreciate all the work @jmauzy has put in! Any word on when this might be approved and merged in? Once I get a work thing or two off my plate, I can try to give this some review at some point ...

vAskitsa · 2020-11-02T10:58:12Z

Is this going anywhere? This is very needed feature.

threepears · 2020-11-23T21:33:12Z

@jmauzy I have some time this week to look this over, and would like to help get this over the finish line. I've pulled this branch down locally and am looking through your code ...

To address your earlier points ... I think that adding background events to the month and agenda views is a good idea. I know, at least in our business's use case, we would want that ... people here want to know they have availability slots that day, in addition to the actual scheduled events themselves. I think as long as we leave them open to be colored as the user wants, they could distinguish them from other events. I thought about maybe fading them like the ones in the week or day view, but then that's something the user can't easily override.

The "standard event overlaps the start time of a background event" thing is a little more difficult, admittedly. I'm sort of poking around for some solutions currently to see what looks good. Did you have any further thoughts on this? Any other issues that should be addressed before getting this PR accepted?

jmauzy · 2020-11-24T20:38:19Z

I'd be happy to catch this back up over the weekend if maintainers have the intention of merging it in. I've been using the branched version in production for some time now with no issues and basically abandoned this PR due to lack of response.

threepears · 2020-11-25T17:45:03Z

@jmauzy Glad to hear you're willing to circle back around to this! I went ahead and put in some code here locally to have background events show up in both month and agenda views, as I know that's something we need in our use case ... but if you feel it's not something everyone would want, we could put a boolean prop in or something that would give folks the option?

Also, I tried to solve the issue of events and background events starting at the same time, but just wasn't able to come up with a good solution. I thought maybe about having the tops of events as tabs, but that would take some graphic work. I also tried to push events in with left and right padding a little bit, and even added a little drop shadow on them (as shown below), but I'm not really pleased with that either. Still thinking on it, though. Another question: should we let people control the opacity of background events with a prop? Some people may not want them faded, or maybe would want them faded more?

JCardenete · 2021-01-11T18:31:47Z

As others said above, it looks great and is a much needed feature

danmurphycp · 2021-01-12T22:41:45Z

This feature would be super useful for something i'm working on and I would love to see it merged.

* 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 <Calendar /> background event story * Fix background event width calculation Co-authored-by: rrjoson <rrjoson08@gmail.com> Co-authored-by: Jeremy Mauzy <jmauzy@alertmd.com>

rrjoson and others added 10 commits March 1, 2019 05:32

feat: Add background events

11bcbc8

Clean up time grid background event

6b92983

Update time grid background event name

e029e77

Add storybook example

458bb99

Fix typo in documentation

84164ea

Remove unused props in documentation

b0079bf

Clean up Background Events feature in preparation for merge

841a436

Merge upstream data

f6f7f92

Remove package-lock.json

0a00e77

Code clean up

4c196ee

jmauzy mentioned this pull request Aug 13, 2020

feat: Add background events #1161

Open

jquense reviewed Aug 17, 2020

View reviewed changes

jquense#1727 Add better background events example and address code re…

e62b716

…view

ronmara approved these changes Sep 7, 2020

View reviewed changes

kamildebicki mentioned this pull request Jan 28, 2021

Add background events feature #1851

Merged

jmauzy closed this May 11, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add background events feature #1727

Add background events feature #1727

jmauzy commented Aug 13, 2020

jquense Aug 17, 2020

jquense left a comment •

edited

Loading

jquense Aug 17, 2020

jquense Aug 17, 2020

jquense Aug 17, 2020

jmauzy commented Aug 17, 2020

vAskitsa commented Sep 12, 2020

KhaledMohamedP commented Oct 13, 2020

threepears commented Oct 20, 2020

vAskitsa commented Nov 2, 2020

threepears commented Nov 23, 2020 •

edited

Loading

jmauzy commented Nov 24, 2020

threepears commented Nov 25, 2020 •

edited

Loading

JCardenete commented Jan 11, 2021

danmurphycp commented Jan 12, 2021

Add background events feature #1727

Add background events feature #1727

Conversation

jmauzy commented Aug 13, 2020

jquense Aug 17, 2020

Choose a reason for hiding this comment

jquense left a comment • edited Loading

Choose a reason for hiding this comment

jquense Aug 17, 2020

Choose a reason for hiding this comment

jquense Aug 17, 2020

Choose a reason for hiding this comment

jquense Aug 17, 2020

Choose a reason for hiding this comment

jmauzy commented Aug 17, 2020

vAskitsa commented Sep 12, 2020

KhaledMohamedP commented Oct 13, 2020

threepears commented Oct 20, 2020

vAskitsa commented Nov 2, 2020

threepears commented Nov 23, 2020 • edited Loading

jmauzy commented Nov 24, 2020

threepears commented Nov 25, 2020 • edited Loading

JCardenete commented Jan 11, 2021

danmurphycp commented Jan 12, 2021

jquense left a comment •

edited

Loading

threepears commented Nov 23, 2020 •

edited

Loading

threepears commented Nov 25, 2020 •

edited

Loading