The beforeMonthChangedCallback enables efficient bulk loading of date metadata (prices, availability, badges) with a single API call per month navigation instead of 35-42 individual callbacks per day.

Performance Comparison

1 API call vs 35-42 per month

Live Demo
❌ Old Way: Per-Day Callbacks

Uses getDateMetadataCallback
Called 35-42 times per month

✅ New Way: Bulk Loading

Uses beforeMonthChangedCallback
Called 1 time per month navigation

Performance: Bulk loading is 35-42× more efficient than per-day callbacks. Try it: Navigate between months to see the loading difference!
Code Examples
Performance Comparison 
 
 
Details
 
Performance Impact
 
The difference is dramatic:
 
  • Old way: 35-42 API calls per month = slow, expensive
    •  
  • New way: 1 API call per month = fast, efficient
    •  
  • Result: 35-42× reduction in API calls
 
When to Use
 
Use bulk loading when:
 
  • Loading prices/availability from an API
    •  
  • Displaying dynamic badges or tooltips
    •  
  • Working with hotel bookings, event calendars, etc.
    •  
  • Performance matters (mobile, slow connections)
 
Best Practice: Always use beforeMonthChangedCallback for
						dynamic data. Reserve getDateMetadataCallback for static/computed
						metadata.
 
Hotel Booking with Multi-Tier Pricing
 
Dynamic price badges and itemized summary breakdown
 
Live Demo
  
Pricing Calculation: (Select a date range to see pricing)
 
Prices vary by day: Budget ($99), Standard ($149), Premium ($199), Deluxe ($249), Luxury ($299).
					Each date shows its price as a colored badge. Select a range to see the itemized breakdown.
 
Code Examples
 
JavaScript - Multi-Tier Pricing 
 
 
 
HTML 
 
 
 
Details
 
Key Features
 
  • Dynamic price badges - Each date shows its nightly rate as a colored badge
    •  
  • 5-tier pricing model - Budget, Standard, Premium, Deluxe, Luxury
    •  
  • Custom badge styling - Color-coded badges (green → blue → purple → orange → red)
    •  
  • Itemized breakdown - Summary shows per-tier calculations and grand total
    •  
  • Hover tooltips - Badge tooltips show tier name and price
 
Pricing Tiers
 
  • Budget ($99) - Mon, Tue, Sun
    •  
  • Standard ($149) - Wed, Thu
    •  
  • Premium ($199) - Fri
    •  
  • Deluxe ($249) - Sat
    •  
  • Luxury ($299) - Special dates (7th, 14th, 21st, 28th)
 
Callbacks Used
 
  • beforeMonthChangedCallback - Bulk load prices for visible months
    •  
  • customStylesCallback - Inject CSS for badge color schemes
    •  
  • formatSummaryCallback - Build itemized pricing summary
 
Use Cases
 
  • Hotels/Vacation Rentals - Show variable pricing on calendar
    •  
  • Event Ticketing - Different prices for different dates
    •  
  • Dynamic Pricing - Demand-based or seasonal rates
    •  
  • Multi-tier Services - Visual price comparison
 
Loading States
 
Automatic loading overlay during API calls
 
Live Demo
  
Click navigation arrows to see loading overlay (simulated 1 second delay)
 
Code Examples
 
JavaScript 
 
 
 
Details
 
Automatic Loading States
 
The date picker automatically shows a loading overlay during async operations in beforeMonthChangedCallback:
 
  • Shows: When callback is called (before navigation starts)
    •  
  • Hides: When callback resolves (after metadata loaded)
    •  
  • Blocks interaction: Users can't click during loading
 
No Extra Code Needed
 
You don't need to implement loading states yourself. Just return a Promise from your
						callback, and the component handles the rest.
 
Best Practice: Keep API calls fast (<500ms). If your API is slow,
						consider caching or pre-loading data for better UX.
 
Blocking Navigation
 
Prevent navigation to unavailable months
 
Live Demo
  
Try navigating forward 3+ months - navigation will be blocked with a message
 
Code Examples
 
JavaScript 
 
 
 
Details
 
Navigation Blocking
 
You can prevent navigation to specific months by returning action: 'block' from the callback:
 
  • Blocks navigation: Calendar stays on current month
    •  
  • Shows message: Optional user-friendly message explaining why
    •  
  • Use cases: Data not available, bookings closed, restricted dates
 
Return Values
 
The callback must return an object with:
 
  • action: 'accept' - Allow navigation, provide metadata (optional)
    •  
  • action: 'block' - Block navigation, show message (optional)
 
Common Blocking Scenarios
 
  • Data availability: Block months without pricing data
    •  
  • Business rules: Block booking beyond 6 months
    •  
  • Seasonal closures: Block off-season months
 
Note: Blocking is checked BEFORE navigation occurs, so users never see
						empty/loading months that will be blocked.