Infinite scroll - embedding examples

This page explains how to use Infinite scroll parent selector option with combination if Infinite scroll.

You can find these options in Design tab of your Event List calendar

A basic knowledge of CSS and HTML selector is required to understand this example.

This example assumes you'd like to embed calendar as a widget on your website on its right side of the page. Because the calendar should not break the page design, the embeddable container height has been limited.

Both examples shown below embeds the calendar in the <div> node with CSS classes:

.parent-container {
  max-height: 300px;
  overflow: auto;
}
            

Example 1

Infinite scroll calendar with scroll parent not set.

The first calendar on the right shows a calendar with infinite scroll option turned on. Because setting of Infinite scroll parent selector is not specified, it will not dynamically load next portion of events.

Scroll calendar to the top to see what will happen.

This calendar is embedded in <div> container with class parent-container first:

<div class="parent-container first">

By clicking the button below, you can turn off max-height settings to see how it will impact the page design

Example 2

Infinite scroll calendar with scroll parent set.

The second calendar has same settings as the previous one but it also has Infinite scroll parent option set to .parent-container.second. This way calendar can track the scroll position of embeddable container and pull next events when user reach the end of the calendar.

This calendar is embedded in <div> container with class parent-container second:

<div class="parent-container second">