Control calendar size with the unified density system for fonts, spacing, and cell dimensions
How it works: The calendar uses --drp-rem (default: 10px) as a base unit.
All spacing, fonts, and sizes derive from this. Change --drp-rem to scale everything proportionally,
or override individual CSS variables for fine-grained control.
Shadow DOM Note: CSS variables must be set directly on the <web-daterangepicker>
element (via inline style or CSS selector), not on a wrapper div. This is because the component uses Shadow DOM.
Input Size Attribute
input_size="xs | sm | md | lg | xl"
The input-size attribute controls input field size in floating mode. This is a built-in attribute.
set a CSS var on the element: class="scale-lg" or style="--drp-rem: 15px"
Scale the entire calendar by setting --drp-rem directly on the element. Default is 10px.
Perfect for dense dashboards
Good for compact layouts
Standard size
Spacious desktop layouts
Touch-friendly, accessibility, kiosks
/* Option 1: CSS class targeting the element */web-daterangepicker.scale-sm {
--drp-rem: 8px;
}
/* Option 2: Inline style */<web-daterangepickerstyle="--drp-rem: 8px">/* Option 3: ID selector */#my-calendar {
--drp-rem: 15px;
}
Time Picker — Scaling
picker_mode="time" + a scale-* class
The picker-mode="time" rolling lists derive their column width, item height, padding,
and font size from --drp-rem. Change --drp-rem and the whole time picker scales.
4 columns (H, M, S, AM/PM) scale together
Datetime Picker — Scaling
picker_mode="datetime" — calendar + time rolls side by side
picker-mode="datetime" places the calendar and the time rolls side by side. The popover floor
scales with --drp-rem so the side-by-side layout holds at any scale.
Spacing and font overrides flow through to the time rolls too
Clock Picker — Scaling
time_display="clock"
time-display="clock" uses a fixed-aspect dial. All clock metrics derive from
--drp-rem via calc(), so the whole face scales proportionally.
Calendar + clock side by side, both scaled together
Wheel Picker — Scaling
time_display="wheel"
time-display="wheel" is an iOS-style barrel of snap-scrolling columns. The center band
height, item height, and fade gradients all derive from --drp-rem.
Calendar + wheel barrel side by side
Compact Picker — Scaling
time_display="compact"
time-display="compact" is iOS 14+ pills. The pill size, padding, and AM/PM toggle scale
with --drp-rem so the row stays proportionate to the surrounding input.
Calendar + compact pills side by side
Interactive Scale Demo
the slider sets style="--drp-rem: …" on the element (see demos.js)
Drag the slider to see live scaling:
/* The CSS variable being changed: */#interactive-demo {
--drp-rem: 10px;
}
Custom Spacing
class="spacing-compact" / "spacing-spacious"
Override spacing variables for fine-grained control over gaps and padding:
Dense dashboard view - perfect for year-at-a-glance
Normal size for standard displays
CSS Variables Reference
All available CSS variables for sizing. Set these on the <web-daterangepicker> element:
Base Unit
--drp-rem: 10px; /* Base unit - change this to scale everything */
Spacing Variables
--drp-spacing-xs: 4px; /* Extra small gaps */--drp-spacing-sm: 8px; /* Small gaps */--drp-spacing-md: 16px; /* Medium gaps */--drp-spacing-lg: 24px; /* Large gaps */--drp-spacing-xl: 32px; /* Extra large gaps */
Font Size Variables
--drp-font-size-2xs: 10px; /* Badges */--drp-font-size-xs: 12px; /* Small labels */--drp-font-size-sm: 14px; /* Day numbers */--drp-font-size-base: 16px; /* Header text */--drp-font-size-lg: 18px; /* Large text */--drp-font-size-xl: 20px; /* Unified header */
Input Size Variables
/* These are set automatically by input-size attribute */--drp-input-size-xs-height: 31px;
--drp-input-size-sm-height: 33px;
--drp-input-size-md-height: 35px;
--drp-input-size-lg-height: 38px;
--drp-input-size-xl-height: 41px;
🔌 Server round-trip
0
The LiveView server saw 0 event(s) from the wrapper.