Design: Events - Infinite scroll

Display just a month's worth of events or endless events.

Jason Alexis avatar
Written by Jason Alexis
Updated over a week ago

To find this design item...

Step 1: After you log in, click on Calendars (brown box below).

The Your Calendars page will open.

Step 2: Choose the calendar you wish to modify (brown box below).

Step 3: Click on Design (brown box below).

Step 4: Click on Events (brown box below).

Step 5: Scroll down until you find Infinite scroll.

To modify this design item...

When this button is toggled off (above), the events scrolling stops at the end of the month (brown box below). In this case, November 30.

However, when this button is toggled on (below)...

...the event scrolling will continue "infinitely" until the end of all found events. Notice how the dates seamlessly continue to the next month (from November to December) in the brown box below.

***Infinite scroll parent selector***

This design item relates to embedding your calendar on a website. Here is a simplified, non-tech explanation:

When we embed a calendar on a web page, we give it a set space, a "box" if you will. We want the calendar to stay in the box.

So, what happens with infinite scrolling? The list is "endless", right?

We want to make sure that the events scroll endlessly BUT do not get out of their "box" and start running down the rest of the web page.

That's what this design item does. For a tech explanation and "how to", check out this link: https://sync.ccb.events/examples/parent_scroll_selector

1st example on page linked above

Shows Infinite scroll turned on and calendar embedded in a container that limits the height. By default, infinite scroll uses the bottom of the page to trigger loading of the next events. If you embed calendar this way then infinite scroll will never trigger as for this container the end of the page will never be reached (I know it sounds odd but.. that's how it works). To make infinite scroll "smarter" you can use then parent selector to tell the calendar upon what "container" scroll end it should pull next events.
โ€‹

2nd example on page linked above

This just shows the result of a proper use of parent selector.
โ€‹

Also, there is a button that would turn off the parent container height.

The list will become longer and pull next events when end of the page is reached. This is why you might want to limit the height of the parent container; otherwise you may be in a situation where you cannot scroll to the bottom of the page.

Click Save at the bottom of the column to save your changes.

Did this answer your question?