The date picker provides powerful customization options for day cell rendering through named slots and render callbacks. Use slots for declarative HTML customization or callbacks for programmatic control with dynamic content.

Priority Order:
  1. Named Slots (highest) - Specific dates via slot="day-YYYY-MM-DD"
  2. renderDayCallback - Full day cell replacement
  3. renderDayContentCallback - Augment default day cell
  4. Default Rendering (lowest) - Standard day number display

Named Slots (Declarative)

Use HTML slots to customize specific dates

Live Demo
🎉 1
❤️ 14
💼 15

Special dates: Jan 1 (New Year), Jan 14 (Valentine's), Jan 15 (Meeting)

Code Examples
HTML 
 
 
Details
 
Use Cases
 
  • Holidays & Events - Mark special dates with icons
    •  
  • Availability - Show booked/available status
    •  
  • Prices - Display different pricing on specific dates
    •  
  • Deadlines - Highlight important dates
 
Key Features
 
  • ✅ Declarative - Define in HTML markup
    •  
  • ✅ Highest priority - Overrides all callbacks
    •  
  • ✅ Date-specific - Target exact dates with slot="day-YYYY-MM-DD"
    •  
  • ✅ Full HTML support - Use any HTML elements, styles, components
 
renderDayCallback (Full Replacement)
 
Programmatically replace entire day cell content
 
Live Demo
  
Weekend dates show emoji indicators
 
 
Code Examples
 
JavaScript 
 
 
 
Complete DayRenderData Interface 
 
 
 
Details
 
Use Cases
 
  • Dynamic pricing - Show prices from API
    •  
  • Availability indicators - Booked/available/limited
    •  
  • Custom layouts - Multi-line content, icons, badges
    •  
  • Conditional styling - Based on date properties
 
Key Features
 
  • ✅ Full control - Complete replacement of day cell
    •  
  • ✅ Dynamic content - Calculate based on date data
    •  
  • ✅ Return types - HTMLElement, string, or null
    •  
  • ⚠️ Overridden by slots - Named slots take priority
 
Return Values
 
  • HTMLElement - Rendered element replaces default
    •  
  • string - HTML string replaces default
    •  
  • null - Falls back to default rendering
 
renderDayContentCallback (Augmentation)
 
Add content alongside the default day number
 
Live Demo
  
Days show availability badges below the date
 
 
Code Examples
 
JavaScript 
 
 
 
Details
 
Use Cases
 
  • Badges & labels - Add indicators below date
    •  
  • Price display - Show pricing under date
    •  
  • Status indicators - Availability, capacity, etc.
    •  
  • Tooltips - Additional contextual info
 
Key Features
 
  • ✅ Augmentation - Keeps default day number
    •  
  • ✅ Less invasive - Adds content, doesn't replace
    •  
  • ✅ Flexible layout - Content appears below day number
    •  
  • ⚠️ Lower priority - Overridden by slots and renderDayCallback
 
Difference from renderDayCallback
 
renderDayContentCallback adds to the default day cell, while renderDayCallback replaces it entirely. Use renderDayContentCallback when you want to keep the standard appearance but add extra information.
 
Comparison: When to Use Each Approach
 
FeatureNamed SlotsrenderDayCallbackrenderDayContentCallback
PriorityHighestMediumLowest
Use CaseSpecific dates (holidays, events)All dates with dynamic contentAdd info to all dates
ApproachDeclarative HTMLProgrammatic JSProgrammatic JS
Replaces Day?✅ Yes (per date)✅ Yes (all dates)❌ No (augments)
Dynamic Data❌ Static HTML✅ Full access✅ Full access
Best ForFew special datesComplex custom renderingAdding badges/labels
 
Tips & Best Practices
 
✅ DO: 
  • Use slots for a few specific dates (holidays, events)
    •  
  • Use renderDayCallback for complex, dynamic content on all dates
    •  
  • Use renderDayContentCallback to add supplementary info (prices, badges)
    •  
  • Return null from callbacks to fall back to default rendering
    •  
  • Keep custom content concise to maintain calendar readability
 
⚠️ DON'T: 
  • Mix all three approaches unnecessarily - use the simplest solution
    •  
  • Create extremely large custom elements that break calendar layout
    •  
  • Forget that slots override callbacks (understand priority order)
    •  
  • Use renderDayCallback when renderDayContentCallback would suffice (less intrusive)
 
Advanced Example: Hotel Booking
 
Combining slots for special events with renderDayContentCallback for pricing:
 
Hotel Booking Example