Control how the summary area displays selection information in range mode. Perfect for showing pricing, night counts, or custom messaging below the calendar grid.

Note: The summary area only appears in range mode when both start and end dates are selected. It appears below the calendar grid, not in the input field.
JavaScript API Only: The formatSummaryCallback option is only available when using the JavaScript API (new DateRangePicker(...)). It is not exposed as a web component attribute or property.

Custom Range Summary

Customize the summary text below the calendar

Live Demo
Summary Output: (Select a date range to see custom summary)

The summary appears both inside the calendar (below the grid) and is shown above. Try selecting a date range to see the custom format.

Code Examples
JavaScript 
 
 
HTML 
 
 
 
Details
 
What It Does
 
Customizes the text shown in the calendar summary area (below the calendar grid) in range mode.
 
Common Patterns
 
  • With duration - "Nov 1 - Nov 7 (7 days)"
    •  
  • Day count emphasis - Large bold number + "days"
    •  
  • Nights for hotels - Use data.nights instead of data.days
 
Available Data
 
  • data.startDate - Range start (Date object)
    •  
  • data.endDate - Range end (Date object)
    •  
  • data.days - Total days in range
    •  
  • data.nights - Total nights (days - 1)
    •  
  • data.localeStrings - Localized text (day/days, night/nights)
    •  
  • data.isPreview - True when dragging to adjust dates
 
Important Note
 
This does not change the input field value. The input field uses date-format-mask for formatting.
 
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
    •  
  • Current month - Auto-displays current month (no scrolling needed)
    •  
  • 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
 
  • customStylesCallback - Inject CSS for badge color schemes
    •  
  • getDateMetadataCallback - Return badge data for each date
    •  
  • 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
 
Additional Examples
 
Variable Pricing (Weekday vs Weekend)
 
Variable Pricing Example 
 
 
 
Multi-Language Support
 
Localized Summary 
 
 
 
Minimum Stay Validation
 
Validation in Summary