Empty calendar when contained in Tab not open by default

Created on 1 August 2025, 16 days ago

Problem/Motivation

FullCalendar view appears empty when placed in a tab that is not open by default. The calendar loads correctly in the default tab but fails to display events when switching to non-default tabs.

Steps to reproduce

  1. Create a FullCalendar view with events
  2. Add this view as a block
  3. Place the block in a tab that is not opened by default (using tabs module like QuickTabs or Field Group tabs)
  4. Load the page - the default tab loads fine
  5. Click on the tab containing the FullCalendar
  6. Observe that the calendar appears empty despite having events

Proposed resolution

The issue is likely caused by JavaScript initialization timing. The FullCalendar library initializes when DOM is ready, but when the container is hidden (display:none) in inactive tabs, the calendar cannot calculate dimensions properly.

Possible solutions:

  • Add a resize/refresh trigger when tabs become visible
  • Initialize calendar only when container becomes visible
  • Use FullCalendar render() method when tab is activated

API changes

None expected

🐛 Bug report
Status

Active

Version

5.2

Component

Code

Created by

🇫🇷France Julien Tekrane

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024