feat: Add background events

[rrjoson]

Summary of Changes

• Add a background events feature similar to https://fullcalendar.io/docs/background-events

Notes

• This is based on Adding background support #1085 (comment)

Screenshots

• 

[jquense]

Nice! I think this is a good start, in terms of API and internal separation from the "real" events. I think it may be helpful before continuing on an implementation to do some work speccing out a few things:

• What use-cases should feature enable?
• In what specific ways are bg events different from plain events (this helps us determine the api, and solve questions like "should drag and drop work on them")

at that point i think we can DRY up places where there is a lot of overlap and separate more the points in which they differ.

how's that sound?

[rrjoson]

Sounds good! Thanks for the feedback!

I'll spec out here first for feedback the use cases that the bg events feature enables and then specify how the bg events are different from plain events.

After that, I'll proceed with:

• DRY up the code
• Separate the points in which they differ
• Continue with other changes to the API like "Drag and drop" feature on the bg events, etc.

[rrjoson]

Hi @jquense. Let me know your thoughts about this when you're free. Thanks!

In which use-cases should we enable this feature?

• As a user, I want to only be able to schedule an event within certain time slots
• As a user, I want to emphasize or highlight certain time slots on the calendar view
• As a user, I want to emphasize certain days in the calendar month view
• As a user, I want to show which slots are available to book an event with
• As a user, I want to add labels to certain days or timeslots

In what specific ways are bg events different from plain events?

• Background events are read only "events" as these are only used to highlight or add labels to time slots.
• Background events can have some kind of constraint that allows us to only create or drop events inside these background events (See: https://github.com/fullcalendar/fullcalendar/blob/master/demos/background-events.html#L33)

[jquense]

looks good @rrjoson I do wonder if we need the same layout mechanism as normal events for these as well. Do you know of any prior art aside from Full calendar we can look at for UX/UI on that front?

[rrjoson]

@jquense sorry, I don't know any. Actually I was thinking of just copying the background event UI from Full calendar and just use a shade of blue so that it matches the default color for the events. What do you think?

[jquense]

looks great 👍

[rrjoson]

Latest WIP:

[rohit-sourcefuse]

Any update on this?
I am also waiting for this pull request. That a nice feature.
And also thanks for this wonderful component.

[rrjoson]

Hi @rohit-sourcefuse

Sorry wasn't able to continue on this. Will try to finish it within the following week.

[rrjoson]

Hi @jquense

When you're free, can I have a quick feedback on my progress here?

Thanks!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jackjocross]

@jquense anything I can do to help you out here? I'm creating a fork to use these changes, but would love to help merge into the official repo.

[nthgol]

we've also forked this PR and merged in master.
Our main use case is showing free/busy, read-only events pulled from a 3rd party calendar API overlaying the user's ability to select.
Here's an unstyled example.
I support reopening this and adding this functionality.

[sgraham3311]

This is a good PR and should be merged. Can we get an update on this @jquense

[jquense]

Oops sorry this got lost in time. GH is bad at this and I'm not a good maintainer. If anyone wants to pick this and get it updated I'll merge it

[sgraham3311]

@jquense

After doing some work/research I was able to achieve the desired result with the latest version of react-big-calendar. I essentially just provided a custom dayLayoutAlgorithm giving the background events their own styled events.

import nooverlap from 'react-big-calendar/lib/utils/layout-algorithms/no-overlap';

export default ({ events, minimumStartDifference, slotMetrics, accessors }) => [
	...nooverlap({
		events: events.filter((e) => e.type === 'background'),
		minimumStartDifference,
		slotMetrics,
		accessors
	}),
	...nooverlap({
		events: events.filter((e) => e.type !== 'background'),
		minimumStartDifference,
		slotMetrics,
		accessors
	})
];

By using the eventPropGetter I am able to apply styles to the background events and most importantly set pointer-events: none so they don't receive click events.

You can end up with something like this

[KhaledMohamedP]

How does this implementation handles overlapping background events?

[jmauzy]

I've picked this up in PR #1727