Event Calendar: How to display events grouped by months on separate pages with custom pagination (Grid layout)

[Max]

By default, the Grid layout in the Event Calendar widget displays all grouped months on one page. If you have a long event schedule, navigation can become less convenient for visitors.

With a few lines of custom code, you can turn month groups into separate pages and add a simple month pagination at the bottom of your calendar.

How to create month pagination in Event Calendar

---

To achieve this layout, you need to add custom JavaScript and CSS code to your widget:

Add Custom JS code

Open your Event Calendar widget settings, go to the Settings tab → Custom JS section and paste the script below:

const EVENTS_BY_PAGE = 1;

util.waitForAllElements('.eapp-events-calendar-grid-group').then((nodeList) => {
  if (!nodeList?.length) {
    return;
  }

  const items = util.findAllElements('.eapp-events-calendar-grid-group');
  if (!items.length) {
    return;
  }

  const container = items[0].parentNode;
  const layout = util.findElement('.eapp-events-calendar-events-calendar-layout');
  if (!container || !layout) {
    return;
  }

  if (layout.querySelector('.eapp-events-calendar-pages')) {
    return;
  }

  const pagesCount = Math.ceil(items.length / EVENTS_BY_PAGE);

  const pagesContainer = document.createElement('div');
  pagesContainer.className = 'eapp-events-calendar-pages';
  layout.appendChild(pagesContainer);

  for (let i = 0; i < pagesCount; i++) {
    const page = document.createElement('div');
    page.className = 'eapp-events-calendar-page';
    const itemsInPage = items.slice(i * EVENTS_BY_PAGE, (i + 1) * EVENTS_BY_PAGE);

    page.addEventListener('click', () => {
      container.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });

      items.forEach((item) => item.remove());
      itemsInPage.forEach((item) => container.appendChild(item));

      pagesContainer
        .querySelectorAll('.eapp-events-calendar-page')
        .forEach((p) => p.classList.toggle('active', p === page));
    });

    if (i === 0) {
      page.classList.add('active');
    }

    page.textContent = itemsInPage
      .map((item) => {
        const date = item.querySelector('.eapp-events-calendar-date-element-item');
        const [month] = date?.textContent?.trim().split(/\s+/) ?? [];
        return month;
      })
      .filter(Boolean)
      .join(', ');

    pagesContainer.appendChild(page);
  }

  items.forEach((item, i) => {
    if (i >= EVENTS_BY_PAGE) {
      item.remove();
    }
  });
});

Note: Custom JS only works on the live site after the widget is installed —it won’t run inside the widget editor or preview.

Add Custom CSS

Next, go to the Custom CSS section in the same Settings tab and add:

.eapp-events-calendar-events-calendar-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.eapp-events-calendar-pages {
  display: flex;
  gap: 10px;
}

.eapp-events-calendar-page {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.eapp-events-calendar-page:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.eapp-events-calendar-page.active {
  background-color: rgba(0, 0, 0, 0.4);
}

You can easily adjust the appearance of the month buttons by editing the CSS values:

• Spacing between months: change the gap value in .eapp-events-calendar-pages

• Button size: adjust padding in .eapp-events-calendar-page

• Hover effect: modify background-color in .eapp-events-calendar-page:hover

• Active month style: change background-color in .eapp-events-calendar-page.active

• Alignment: update justify-content or align-items in the layout styles

For example, you can turn the month navigation into compact tabs, rounded buttons, or a minimal text-based menu to better match your website design

That’s it! Your Event Calendar now displays each month on a separate page with simple month navigation, making large event schedules much easier for visitors to explore

Have you tried this customization? We’d love to hear your feedback — feel free to share your experience in the comments