calendar-react/src/types/calendar.ts

export type DateRange = {
  startDate: Date | null;
  endDate: Date | null;
  selecting: boolean;
  hoverDate: Date | null;
  anchorDate: Date | null;
};

export type HeaderStyle = 'expanded' | 'compacted' | 'tiny' | 'none';
export type MonthCutoffType = 'dimmed' | 'truncate' | undefined;
export type DirectionType = 'row' | 'column';
export type DayVariation =
  | 'greyed'
  | 'selected'
  | 'rangeStart'
  | 'rangeEnd'
  | 'selecting'
  | 'rowStart'
  | 'rowEnd'
  | 'active';
export type DaySize = 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';

export interface YearProps {
  year: number;
  dayHeaderStyle: HeaderStyle;
  monthDayOfWeekHeaderStyle?: HeaderStyle;
  monthCutoff?: MonthCutoffType;
  weekendDays?: number[];
  dateRange?: DateRange;
  onDateSelect?: (date: Date) => void;
  onDateHover?: (date: Date) => void;
  size?: DaySize;
  fontProportion?: number;
  magnify?: boolean;
}

export interface MonthProps {
  date: Date;
  dayHeaderStyle: HeaderStyle;
  monthDayOfWeekHeaderStyle?: HeaderStyle;
  direction: DirectionType;
  monthCutoff?: MonthCutoffType;
  weekendDays?: number[];
  dateRange?: DateRange;
  onDateSelect?: (date: Date) => void;
  onDateHover?: (date: Date) => void;
  size?: DaySize;
  fontProportion?: number;
  magnify?: boolean;
}

export interface WeekProps {
  startDate: Date;
  headerStyle: HeaderStyle;
  monthCutoff?: MonthCutoffType;
  referenceMonth: number;
  weekendDays?: number[];
  dateRange?: DateRange;
  onDateSelect?: (date: Date) => void;
  onDateHover?: (date: Date) => void;
  size?: DaySize;
  fontProportion?: number;
  magnify?: boolean;
}

export interface DayProps {
  date: Date;
  headerStyle: HeaderStyle;
  isOtherMonth?: boolean;
  variations?: DayVariation[];
  onSelect?: () => void;
  onHover?: () => void;
  size?: DaySize;
  fontProportion?: number;
  magnify?: boolean;
}