Plugins
Calendar

Calendar & Date Picker

Ant Design's DatePicker and Calendar components, wrapped with Ledger UI theming.

Components

Calendar

Full-size calendar for date selection and event display.

import { Calendar } from '@gtcx/ui';
 
<Calendar
  fullscreen={false}
  onSelect={(date) => console.log(date.format('YYYY-MM-DD'))}
/>

DatePicker

Compact date input with dropdown calendar.

import { DatePicker } from '@gtcx/ui';
 
<DatePicker
  placeholder="Select date"
  format="YYYY-MM-DD"
  onChange={(date, dateString) => console.log(dateString)}
/>

Features

FeatureSupport
Single date selectionYes
Date range pickerVia DatePicker.RangePicker
Month/year pickerVia picker prop
Disabled datesVia disabledDate prop
Custom cell renderingVia cellRender prop
LocalizationVia @gtcx/i18n locale

Date Range Example

import { DatePicker } from '@gtcx/ui';
const { RangePicker } = DatePicker;
 
<RangePicker
  format="DD/MM/YYYY"
  onChange={(dates, dateStrings) => {
    console.log('From:', dateStrings[0], 'To:', dateStrings[1]);
  }}
/>

Localization

Calendar respects the locale set by GtcxConfigProvider. For RTL languages, the calendar layout mirrors automatically.

import { GtcxConfigProvider } from '@gtcx/theme';
import { Calendar } from '@gtcx/ui';
 
<GtcxConfigProvider locale="ar">
  <Calendar />
</GtcxConfigProvider>

Accessibility

  • Full keyboard navigation (arrow keys, Enter, Escape)
  • ARIA labels on all date cells
  • Screen reader announcements for date changes
  • Focus management when opening/closing dropdowns
ChartsEditor