When displaying multiple months, unified navigation provides a single header that controls all visible months simultaneously, creating a cleaner and more intuitive interface.

Basic Unified Navigation

Single header controls all months

Live Demo

6 months with unified navigation header showing range "January 2025 - June 2025"

Code Examples
HTML 
 
 
JavaScript 
 
 
 
Details
 
What is Unified Navigation?
 
Instead of showing individual navigation headers for each month, unified navigation
						displays a single header at the top showing the range of visible months (e.g.,
						"January 2025 - June 2025").
 
Benefits
 
  • Cleaner interface - Less visual clutter with one header
    •  
  • Synchronized navigation - All months navigate together as a unit
    •  
  • Better UX - Clear indication of what months are visible
    •  
  • Space efficient - Saves vertical space in grid layouts
 
Key Option
 
  • unified-navigation - Enable unified navigation header
 
Note: Unified navigation works with both horizontal and grid layouts,
						and is especially useful for grid layouts with 4+ months.
 
Interactive Unified Header
 
Click header to open month/year selector
 
Live Demo
  
Click the unified header to open the month/year rolling selector
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
Interactive Header
 
When unified-header-interactive is enabled, clicking the unified header
						range display opens the month/year rolling selector, allowing quick navigation to any
						month/year.
 
Use Cases
 
  • Quick jumps - Jump to specific months without clicking arrows
    •  
  • Year changes - Easily navigate between years
    •  
  • Better UX - More intuitive than clicking arrows repeatedly
 
Key Options
 
  • unified-navigation - Enable unified navigation (required)
    •  
  • unified-header-interactive - Make header clickable to open selector
 
Try it: Click on "January 2025 - June 2025" in the demo above to open
						the rolling selector and quickly navigate to different months/years.
 
Custom Header Text
 
Customize the unified header display
 
Live Demo
  
Custom header shows only the center anchor month instead of full range
 
 
Code Examples
 
HTML + JavaScript 
 
 
 
JavaScript 
 
 
 
Details
 
Custom Header Callback
 
The getUnifiedHeaderCallback allows you to customize the text displayed in
						the unified header. This is useful for showing only the anchor month, custom date
						formats, or localized text.
 
Callback Parameters
 
The callback receives an object with:
 
  • firstMonth - Date object for first visible month
    •  
  • lastMonth - Date object for last visible month
    •  
  • anchorMonth - Date object for the anchor month
    •  
  • monthNames - Array of localized month names (e.g., ["January", ...])
 
Common Patterns
 
  • Anchor only: Display center month in 3×3 grids
    •  
  • Short format: "Jan - Sep 2025" instead of full names
    •  
  • Localized: Custom format based on user locale
 
Note: This callback is only available as a JavaScript property, not as
						an HTML attribute. Set it via JavaScript after component initialization.
 
Navigation Anchor
 
Control which month drives navigation
 
Live Demo
  
Anchor set to middle of top row (index 2) for balanced navigation
 
Code Examples
 
HTML 
 
 
 
JavaScript 
 
 
 
Details
 
What is the Anchor Index?
 
The anchor index determines which month is considered the "center" for navigation
						purposes. When you click previous/next, the calendar navigates relative to this anchor
						month.
 
Common Anchor Positions
 
  • 2×3 grid (6 months): Index 2 (middle of top row)
    •  
  • 3×3 grid (9 months): Index 4 (center month)
    •  
  • 2×2 grid (4 months): Index 1 or 2 (middle months)
    •  
  • Default: Index 0 (first month) if not specified
 
Use Cases
 
  • Balanced navigation: Navigate forward/back relative to center
    •  
  • Custom header: Display anchor month as the "current" month
    •  
  • Smooth scrolling: More intuitive navigation for large grids
 
Tip: For symmetric grids (3×3, 2×2), use the center month as anchor
						for the most balanced navigation experience.