Calendar

A date picker calendar component for selecting dates.

Selected: No date selected

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

Event Date, September 2026

Installation

React

npx @galaxy-stack/nebula-cli add calendar

Vue

npx @galaxy-stack/nebula-cli add calendar

Angular

npx @galaxy-stack/nebula-cli add calendar

global

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

Usage

React

import { Calendar } from '@/components/calendar'
import { useState } from 'react'

export default function CalendarDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  )
}

Vue

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

const date = ref<Date>(new Date())
</script>

<template>
  <Calendar
    v-model="date"
    class="rounded-md border"
  />
</template>

Angular

import { Component } from '@angular/core'
import { CalendarComponent } from '@/components/calendar'

@Component({
  selector: 'app-calendar-demo',
  standalone: true,
  imports: [CalendarComponent],
  template: `
    <ui-calendar
      [selectedDate]="date"
      (dateChange)="handleDateChange($event)"
      class="rounded-md border"
    />
  `
})
export class CalendarDemo {
  date = new Date()

  handleDateChange(newDate: Date) {
    this.date = newDate
  }
}

API Reference

Props

This component accepts the following props:

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

Props

Prop	Type	Default	Description
selected	Date | undefined	-	The selected date
onSelect	(date: Date | undefined) => void	-	Callback when date is selected
disabled	Date[] | ((date: Date) => boolean)	-	Dates that should be disabled
className	string	-	Additional CSS classes

Examples

With Date Range

React

<Calendar
  mode="range"
  selected={dateRange}
  onSelect={setDateRange}
  numberOfMonths={2}
  className="rounded-md border"
/>

Disabled Dates

React

const disabledDays = [
  new Date(2024, 0, 1),
  new Date(2024, 0, 15),
]

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  disabled={disabledDays}
/>

Accessibility

• Keyboard navigation with arrow keys
• Proper ARIA labels for days and navigation
• Focus management for keyboard users

Author

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

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

License

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