Calendar Range

A date range picker calendar component for selecting a start and end date.

Range: — → —

Event Date, September 2026

September 2026

S	M	T	W	T	F	S
30	31	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	1	2	3

Installation

React

npx @galaxy-stack/nebula-cli add calendar-range

Vue

npx @galaxy-stack/nebula-cli add calendar-range

Angular

npx @galaxy-stack/nebula-cli add calendar-range

global

# If you have installed galaxy-design globally
galaxy-design add calendar-range

Usage

React

import { CalendarRange } from '@/components/calendar-range'
import { useState } from 'react'
import { DateRange } from 'react-day-picker'

export default function CalendarRangeDemo() {
  const [range, setRange] = useState<DateRange | undefined>({
    from: new Date(),
    to: undefined,
  })

  return (
    <CalendarRange
      selected={range}
      onSelect={setRange}
      className="rounded-md border"
    />
  )
}

Vue

<script setup lang="ts">
import { ref } from 'vue'
import { CalendarRange } from '@/components/calendar-range'

const range = ref({
  start: new Date(),
  end: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
})
</script>

<template>
  <CalendarRange
    v-model="range"
    class="rounded-md border"
  />
</template>

API Reference

Props

This component accepts the following props:

Prop	Type	Default	Description
...	...	...	...

Props

Prop	Type	Default	Description
selected	DateRange	-	Selected date range
onSelect	(range: DateRange) => void	-	Callback when range changes
disabled	Date[] | ((date: Date) => boolean)	-	Dates that should be disabled

Features

• Select start and end dates
• Visual indication of selected range
• Hover preview of range selection
• Keyboard navigation support

Accessibility

• Keyboard Navigation: [TODO]
• Screen Reader: [TODO]
• Focus Management: [TODO]
• WCAG Compliance: WCAG 2.1 Level AA compliant

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)