Customize individual month headers to display additional information like working day counts, room availability, or any other aggregated data. Use getMonthHeaderCallback for synchronous customization or return monthHeaders from beforeMonthChangedCallback for async data.

Priority Order: When both are provided, monthHeaders from beforeMonthChangedCallback takes precedence over getMonthHeaderCallback. If neither provides a header for a month, the default format (monthName year) is used.

CMH01 Working Days Counter

Show working day count in month headers

Live Demo

Headers show "MM/YYYY ##WD" format. Green = working days, amber = special non-working days.

Code Examples
getMonthHeaderCallback 
 
 
Visual Day Highlighting 
 
 
 
Details
 
Callback Signature
 
 
 
 
Use Cases
 
  • Working days - Show business days count
    •  
  • Payroll - Display pay periods
    •  
  • Project planning - Available work days
    •  
  • Holiday calendar - Days off count
 
Key Features
 
  • Called for each visible month column
    •  
  • Receives full Date object and localized month name
    •  
  • Return any string for the header
    •  
  • Combine with beforeMonthChangedCallback for visual indicators
 
CMH02 Headers from Async Data
 
Return monthHeaders from beforeMonthChangedCallback
 
Live Demo
  
Headers show total room availability per month, loaded with the metadata.
					Navigate between months to see the loading overlay.
 
Code Examples
 
beforeMonthChangedCallback with monthHeaders 
 
 
 
Details
 
monthHeaders Map
 
The monthHeaders property in the return object is a Map<string, string>:
 
  • Key: "YYYY-MM" format (e.g., "2025-12")
    •  
  • Value: Header text to display
 
When to Use
 
Use monthHeaders from beforeMonthChangedCallback when:
 
  • Header data comes from async API calls
    •  
  • Headers depend on the same data as day metadata
    •  
  • You want to aggregate day-level data for headers
 
Priority
 
monthHeaders takes priority over getMonthHeaderCallback.
						If a month key exists in monthHeaders, the callback is not called for that month.
 
Use Cases
 
  • Hotel booking - Total rooms available per month
    •  
  • Event calendars - Event count per month
    •  
  • Inventory - Stock levels summary
    •  
  • Analytics - Aggregated metrics
 
API Reference
 
PropertyTypeDescription
getMonthHeaderCallback(data) => stringSynchronous callback to customize month header text. Called for each visible month.
monthHeaders
(in return value)		Map<string, string>Optional map of month headers returned from beforeMonthChangedCallback. Key format: "YYYY-MM".
 
getMonthHeaderCallback Data Object
 
PropertyTypeDescription
monthDateDate object set to the first day of the month
monthIndexnumber0-based index of the month column (for multi-month display)
monthNamestringLocalized month name (e.g., "December")
yearnumberFull year (e.g., 2025)