react-hijri-calendar/dist/types/Calendar/Calendar.d.ts

A pluggable React calendar component supporting Hijri and Gregorian dates, theming, and custom rendering.

import type { AvailableDateInfo, CalendarMode, CalendarType, RenderDayCellParams, SetSelectedDateFunc } from './types';
import type { CSSProperties, JSX } from 'react';
interface CalendarProps {
    /** Initially selected date (Date object) */
    initialSelectedDate?: Date | null;
    /** Callback to update selected date */
    setSelectedDate?: SetSelectedDateFunc;
    /** Array of date availability information (required for customAvailable mode) */
    availableDatesInfo?: AvailableDateInfo[];
    /** Calendar selection mode */
    mode?: CalendarMode;
    /** Language for labels ("en" or "ar") */
    lang?: 'en' | 'ar';
    /** Calendar type: 'hijri' or 'gregorian'. If not provided, falls back to lang ('ar' = hijri, 'en' = gregorian) */
    calendarType?: CalendarType;
    /** Optional: Custom day cell renderer */
    renderDayCell?: (params: RenderDayCellParams) => JSX.Element;
    /** Optional: Style overrides */
    className?: string;
    /** Optional: Style overrides for the main calendar container, including CSS variables for theming */
    style?: CSSProperties;
    /** Optional: Style overrides for day cells */
    dayCellStyle?: CSSProperties;
    /** Optional: Class name for day cells */
    dayCellClassName?: string;
    /** Primary color for calendar (overrides default) */
    primaryColor?: string;
    /** Unavailable color for calendar (overrides default) */
    unavailableColor?: string;
}
/**
 * Calendar component for displaying and selecting dates
 * @param {Object} props - Component props
 * @param {string|Date|null} props.selectedDate - Currently selected date
 * @param {function} props.setSelectedDate - Function to update selected date
 * @param {AvailableDateInfo[]} props.availableDatesInfo - Array of date availability information
 * @param {boolean} [props.isLoading] - Loading state of the calendar
 * @param {"en"|"ar"} [props.lang] - Language for labels
 * @param {function} [props.renderDayCell] - Custom day cell renderer
 * @param {string} [props.className] - Optional className for style overrides
 * @param {object} [props.style] - Optional style for main calendar container. You can override theme colors by passing CSS variables, e.g.:
 *   style={{ '--calendar-primary': '#ff6600', '--calendar-unavailable': '#999999' }}
 * @param {object} [props.dayCellStyle] - Optional style for day cells
 * @param {string} [props.dayCellClassName] - Optional className for day cells
 * @param {string} [props.primaryColor] - Primary color for calendar (overrides default)
 * @param {string} [props.unavailableColor] - Unavailable color for calendar (overrides default)
 * @returns {JSX.Element} Calendar component
 *
 * ## Customizing Appearance and Colors
 *
 * You can override styles and theme colors using the `className`, `style`, `dayCellStyle`, and `dayCellClassName` props:
 *
 * ```tsx
 * <Calendar
 *   className="my-calendar"
 *   style={{
 *     background: '#f0f0f0',
 *     '--calendar-primary': '#ff6600',
 *     '--calendar-unavailable': '#999999',
 *   }}
 *   dayCellStyle={{ borderRadius: 8 }}
 *   dayCellClassName="my-day-cell"
 *   ...
 * />
 * ```
 */
export declare const Calendar: {
    ({ initialSelectedDate: selectedDate, setSelectedDate, availableDatesInfo, mode, lang, calendarType, renderDayCell, className, style, dayCellStyle, dayCellClassName, primaryColor, unavailableColor, }: CalendarProps): JSX.Element;
    displayName: string;
};
export {};