Calendar

Range picker with a trigger, month grid, optional presets, and time fields. Click the trigger to open.

Default

value plus @change. allow-clear shows an × when a range is set. min-value and max-value clamp the grid.


        
          1
          
          <Calendar
        

          2
          
            allow-clear
        

          3
          
            :value="range"
        

          4
          
            :min-value="minDate"
        

          5
          
            :max-value="maxDate"
        

          6
          
            @change="range = $event"
        

          7
          
          />

Horizontal layout

horizontal-layout puts presets beside the grid. Hide times with show-time-input false.


        
          1
          
          <Calendar
        

          2
          
            allow-clear
        

          3
          
            horizontal-layout
        

          4
          
            :show-time-input="false"
        

          5
          
            popover-alignment="center"
        

          6
          
            :presets="presets"
        

          7
          
            :value="range"
        

          8
          
            @change="range = $event"
        

          9
          
          />

Sizes

medium is the default trigger (32px). small is 28px and tightens the grid.


        
          1
          
          <Calendar size="small" allow-clear :value="range" @change="range = $event" />
        

          2
          
          <Calendar size="medium" allow-clear :value="range" @change="range = $event" />

Presets

Record of CalendarPreset. Each entry needs text, start, and end.


        
          1
          
          <Calendar
        

          2
          
            :presets="presets"
        

          3
          
            :value="range"
        

          4
          
            @change="range = $event"
        

          5
          
          />

Compact

Tighter padding. Presets wrap in a row above the grid.


        
          1
          
          <Calendar compact :presets="presets" :value="range" @change="range = $event" />

Stacked

Presets above the month. Use this in a sidebar or any narrow column.


        
          1
          
          <Calendar stacked :presets="presets" :value="range" @change="range = $event" />

Presets with default value

preset-index selects a preset on mount when value is empty. Index is the key order.


        
          1
          
          <Calendar
        

          2
          
            stacked
        

          3
          
            :preset-index="2"
        

          4
          
            :presets="presets"
        

          5
          
            :value="range"
        

          6
          
            @change="range = $event"
        

          7
          
          />

Min and max dates

Days outside the window are disabled. Bind the data retention range, not an arbitrary year.


        
          1
          
          <Calendar
        

          2
          
            :min-value="tightMin"
        

          3
          
            :max-value="tightMax"
        

          4
          
            :value="range"
        

          5
          
            @change="range = $event"
        

          6
          
          />

Pinned timezone

pinned-timezone locks the zone and renders it as read-only text instead of a select.


        
          1
          
          <Calendar
        

          2
          
            pinned-timezone="America/Los_Angeles"
        

          3
          
            popover-alignment="center"
        

          4
          
            :value="range"
        

          5
          
            @change="range = $event"
        

          6
          
          />

Best practices

Calendar is a range picker for analytics windows and any surface where weekday and month context matter. A single typed ISO date is an Input.
Ship presets for the common windows (Last 7 Days, Last Month). stacked in a sidebar; horizontal-layout when results sit beside the popover.
Set min-value and max-value to the data you actually have. Do not let people pick outside retention.
Keep value after the popover closes so the next open can tweak the end date. v-model:value is the Vue alias for value + @change.
Default the timezone to the viewer. Use pinned-timezone only when the report is locked to a region. Do not silently render UTC for a Pacific viewer.
The trigger already labels the committed range. Do not replace it with “Pick a date” after a value is set.