Add visual indicators, badges, and tooltips to specific dates to highlight holidays, events, peak pricing, availability, or any special information.

Key Concept: Special dates use a two-row system:
1. Badge Row - Appears ABOVE the day number (emojis, icons, text)
2. Day Cell - The day number itself (can have separate styling and tooltip)

Use Cases

  • Holidays - Mark public holidays with icons and styling
  • Events - Highlight concerts, conferences, or important dates
  • Pricing - Show dynamic pricing or peak/off-peak seasons
  • Availability - Display room availability, booking status
  • Deadlines - Mark project milestones or due dates

DateInfo Properties Reference

Complete property reference with examples

Live Demo

Examples:

• Jan 15: Badge only (🎉 event badge with badge tooltip)

• Jan 20: Day only (highlighted day cell with day tooltip)

• Jan 25: Both (💰 badge + styled day + separate tooltips for each)

Property Table
PropertyTypeDescription
badgeTextstringText/emoji in badge row ABOVE day
badgeClassstringCSS class for badge cell
badgeTooltipstringTooltip on badge hover
dayClassstringCSS class for day cell
dayTooltipstringTooltip on day cell hover
isDisabledbooleanOverride disabled state
All Properties Example 
 
 
Visual Explanation
 
Two-Row System
 
Each date cell has TWO rows:
 
  1. Badge Row (top) - Displays badgeText, styled with badgeClass, shows badgeTooltip on hover
    2.  
  2. Day Row (bottom) - The day number, styled with dayClass,
							shows dayTooltip on hover
 
When to Use Which
 
  • Badge properties - Visual indicators (emojis, icons, short text)
    •  
  • Day properties - Highlight the entire day cell, add context tooltips
    •  
  • Both together - Rich information with multiple layers
 
Complete Example: Holidays, Events & Custom Styling
 
All features combined with customStylesCallback for Shadow DOM
 
Live Demo
  
Try these dates:
 
• Holidays (red): 🎉 Jan 1, 🎆 Jul 4, 🎁 Dec 24, 🎄 Dec 25
 
• Events (green): 🎵 Jun 15, ☘️ Mar 17
 
• Peak Pricing (gold): $$$ Jul 1, Jul 15
 
Complete Code
 
JavaScript API - Complete Example 
 
 
 
Key Concepts
 
Predefined Classes
 
Two classes work out-of-the-box:
 
  • .holiday - Red tinted background
    •  
  • .event - Green tinted background
 
Custom Classes & Shadow DOM
 
CRITICAL: The component uses Shadow DOM. Custom CSS must be injected via:
 
  • customStylesCallback - For JavaScript API (shown above)
    •  
  • Global CSS with full selector - For web component usage
 
❌ Won't Work:
 Regular CSS or <style> tags won't reach inside Shadow DOM 

 ✅ Use Instead:
 customStylesCallback injects CSS directly into Shadow DOM
 
Styling Approaches
 
JavaScript API:
 
customStylesCallback: () => `...css...`
 
Web Component:
 
web-daterangepicker .drp-date-picker__day.my-class { }
 
Dynamic Metadata (getDateMetadataCallback)
 
Real-time pricing based on day of week
 
Live Demo
  
Dynamic Pricing: Prices calculated based on day of week. Weekends ($$$ = $350-450),
					Fridays ($$ = $280-350), Weekdays ($ = $200-280). Navigate to see 60-day pricing forecast.
 
Code Examples
 
Dynamic Pricing 
 
 
 
API Integration 
 
 
 
Details
 
When to Use
 
  • Complex logic - Pricing tiers, business rules
    •  
  • API data - Dynamic availability, bookings
    •  
  • Calculated values - Weekend vs weekday, seasons
 
How It Works
 
  • Called for each visible date in calendar
    •  
  • Receives Date object as parameter
    •  
  • Returns DateInfo object or null
    •  
  • Overrides specialDates if both are used
 
Performance Tips
 
  • Cache API responses
    •  
  • Keep logic simple and fast
    •  
  • Return null quickly for non-special dates
 
Member Mapping
 
Map custom data structures to DateInfo properties
 
Live Demo
  
Events: 🎸 Mar 15 (concert), 🎭 Mar 20 (theater). Data uses custom property
					names!
 
Code Examples
 
API Response Mapping 
 
 
 
All Member Properties 
 
 
 
Details
 
What is Member Mapping?
 
Instead of transforming your API data to match DateInfo property names, you can tell
						the component which properties to use.
 
When to Use
 
  • API integration - Backend uses different property names
    •  
  • Legacy data - Existing data structure you can't change
    •  
  • Multiple sources - Different APIs with different naming
 
Default Property Names
 
If you don't set member options, the component expects:
 
  • date, badgeText, badgeClass
    •  
  • badgeTooltip, dayClass, dayTooltip
    •  
  • isDisabled
 
Advanced: Disabling Dates
 
Override disabled state with isDisabled
 
Live Demo
  
Availability: ✓ Apr 10 (available), ✕ Apr 15 (fully booked - disabled),
					! Apr 20 (limited)
 
Code Examples
 
Static Availability 
 
 
 
Dynamic Availability 
 
 
 
Details
 
isDisabled Property
 
Use isDisabled to dynamically enable or disable specific dates based on
						availability, business rules, or any custom logic.
 
Interaction with Date Restrictions
 
  • isDisabled: true - Date becomes unselectable
    •  
  • isDisabled: false - Can override min/max date restrictions
    •  
  • Works alongside disabledDates, disabledWeekdays
 
Use Cases
 
  • Booking systems - Sold out dates
    •  
  • Calendars - Past events, cancelled dates
    •  
  • Scheduling - Resource availability
 
Advanced: HTML Tooltips
 
Rich formatted tooltips with callbacks
 
Live Demo
  
Hover over badges: 🏨 May 10 (hotel deal), ✈️ May 15 (flight special). Tooltips
					use HTML formatting!
 
Code Examples
 
HTML Tooltips 
 
 
 
DayRenderData Interface 
 
 
 
Details
 
Tooltip Callbacks
 
Two callback functions for HTML tooltips:
 
  • badgeTooltipCallback - Rich tooltips for badges
    •  
  • dayTooltipCallback - Rich tooltips for day cells
 
Priority Order
 
  1. badgeTooltipCallback / dayTooltipCallback (highest)
    2.  
  2. badgeTooltip / dayTooltip from specialDates
    3.  
  3. No tooltip (default)
 
HTML Styling
 
You can use:
 
  • <strong>, <em>, <br>
    •  
  • Inline styles with style attribute
    •  
  • Limited to safe HTML (XSS protection)
 
Best Practices & Decision Guide
 
When to Use What
 
ApproachUse WhenProsCons
specialDates arrayKnown list of dates, static dataSimple, declarative, easy to maintainNot suitable for complex logic
getDateMetadataCallbackDynamic logic, API data, calculationsPowerful, flexible, handles any logicPerformance considerations
Member mappingCustom data structures, API integrationNo data transformation neededExtra configuration required
Both combinedBase data + dynamic overridesMaximum flexibilitygetDateMetadataCallback overrides specialDates
 
Shadow DOM Styling - Critical Information
 
⚠️ Custom CSS Must Be Injected Into Shadow DOM
 
The component uses Shadow DOM, which isolates styles. You have two options:
 
Option 1: JavaScript API - customStylesCallback 
 
 
 
Option 2: Web Component - Global CSS with Full Selector 
 
 
 
❌ This won't work: Regular <style> tags or scoped CSS 
 ✅ Must use: customStylesCallback or global CSS with full selector path
 
Performance Best Practices
 
✓ Do This
 
  • Cache API responses
    •  
  • Return null quickly for non-special dates
    •  
  • Use specialDates for known static data
    •  
  • Keep getDateMetadataCallback logic fast
    •  
  • Use member mapping to avoid data transformation
 
✗ Avoid This
 
  • Making API calls in getDateMetadataCallback without caching
    •  
  • Complex calculations for every date
    •  
  • Mixing both without understanding priority
    •  
  • Long badge text (keep it 1-3 characters)
    •  
  • Forgetting Shadow DOM styling requirements
 
Key Takeaways
 
  • Two-row system: Badge row (top) + Day cell (bottom) with separate properties
    •  
  • 6 DateInfo properties: All documented with examples above
    •  
  • Static vs Dynamic: Use specialDates for known data, getDateMetadataCallback for logic
    •  
  • Shadow DOM styling: Use customStylesCallback (JS API) or global CSS (web component)
    •  
  • Member mapping: Map custom API data without transformation
    •  
  • HTML tooltips: Use callback functions for rich formatting