const CalendarExample = () => {
const [selectedDate, setSelectedDate] = useState(new Kenat());

return (
  <KewtiCalendar
    value={selectedDate}
    showHolidays={true}
    showAnimations={true}
    onChange={(date) => setSelectedDate(date)}
    calendarPref="ethiopian"
  />
);
};
render(<CalendarExample />);

const DatePickerExample = () => {
const [selectedDate, setSelectedDate] = useState(new Kenat());

return (
  <div className="space-y-4">
    <KewtiDatePicker
      value={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      showHolidays={true}
      showAnimations={true}
      calendarPref="ethiopian"
    />
    <p className="text-sm">
      Selected: {selectedDate.format({ calendar: "ethiopian", showWeekday: true })}
    </p>
  </div>
);
};
render(<DatePickerExample />);

const DropdownPickerExample = () => {
const [selectedDate, setSelectedDate] = useState(new Kenat());

return (
  <div className="max-w-sm space-y-3">
    <KewtiDatePickerDropdown
      value={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      calendarPref="ethiopian"
      showHolidays={true}
    />
    <p className="text-xs">
      Selected: {selectedDate.format({ calendar: "ethiopian" })}
    </p>
  </div>
);
};
render(<DropdownPickerExample />);

Installation

npx kewti-cli add calendar

Kewti-Calendar uses Kenat.

Usage

import { 
  KewtiCalendar, 
  KewtiDatePicker, 
  KewtiDatePickerDropdown 
} from "@/kewti/ui"
import Kenat from "kenat"

Basic Calendar

<KewtiCalendar />

Date Picker Popover

const [date, setDate] = useState<Kenat>(new Kenat())

<KewtiDatePicker
  value={date}
  onChange={setDate}
  placeholder="ቀን ይምረጡ"
/>

Dropdown Date Picker

Render compact Day, Month, and Year select dropdowns. This mode automatically clamps invalid days (including Ethiopian leap years for Pagumē and Gregorian leap years for February).

const [date, setDate] = useState<Kenat>(new Kenat())

<KewtiDatePickerDropdown
  value={date}
  onChange={setDate}
  calendarPref="ethiopian"
  showHolidays={true}
/>

Gregorian Mode

Switch the preference to Gregorian across any component while maintaining full compatibility with the underlying Kenat date object.

<KewtiDatePicker
  calendarPref="gregorian"
  placeholder="Select Date"
/>

<KewtiDatePickerDropdown
  calendarPref="gregorian"
  minYear={1980}
  maxYear={2030}
/>

Customizing Animations & Holidays

Disable background themes or holiday banners if a cleaner look is desired.

<KewtiCalendar
  showAnimations={false}
  showHolidays={false}
/>

Custom Styling

Pass custom CSS classes or inline styles using the className and style props.

<KewtiCalendar
  className="shadow-lg border border-neutral-200 dark:border-neutral-800"
  style={{ maxWidth: "320px" }}
/>

<KewtiDatePicker
  className="w-full"
  style={{ opacity: 0.95 }}
/>

<KewtiDatePickerDropdown
  className="max-w-sm"
/>

Features

• Dual Calendar Systems: Seamless support for both Ethiopian and Gregorian date conversions powered by kenat.
• Dynamic Month Themes: Beautiful, smooth gradient backgrounds and seasonal animations per Ethiopian month.
• Holiday Indicators & Details: Built-in holiday identification with an interactive info banner upon date selection.
• Three Picker Modes:
  • Inline Calendar Grid (KewtiCalendar): Full-sized calendar view with month switching.
  • Popover Input (KewtiDatePicker): Form-friendly input trigger with an animated calendar popover.
  • Select Dropdowns (KewtiDatePickerDropdown): Compact multi-select dropdowns for Day, Month, and Year with automatic leap year clamping.
• Customizable Styling: Pass custom className and style properties to adapt to your design system.
• Full Dark Mode Support: Tailored styles for both dark and light modes out of the box.

Props

KewtiCalendar Props

KewtiDatePicker Props

KewtiDatePickerDropdown Props