@fowusu/calendar-kit/dist/index.d.ts

A simple JS only calendar UI for react native

import React from 'react';
import { ViewStyle, DimensionValue } from 'react-native';

type DayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
type DayState = {
    isVisible: boolean;
    isSelected?: boolean;
    isToday: boolean;
    state: "active" | "inactive";
};
type InnerDayProps<T> = T & DayState & {
    locale?: string;
    day: Date;
};
type StateInputParams = {
    markedDates: string[];
    dateString: string;
    minDate?: string;
    maxDate?: string;
    month: Date;
    showExtraDays?: boolean;
    isLastWeekOfList?: boolean;
};
interface CalendarListRef {
    scrollToDate: (dateString: string, animated?: boolean) => void;
}

interface DayProps {
    dateString: string;
    DayComponent?: React.ComponentType<InnerDayProps<Record<string, unknown>>>;
    onPress?: (dateString: string) => void;
    viewState: DayState;
    locale?: string;
    dayContainerStyle?: ViewStyle;
}

interface WeekProps extends Omit<DayProps, "dateString" | "onPress" | "viewState"> {
    weekDays: string[];
    onDayPress?: DayProps["onPress"];
    minDate?: string;
    maxDate?: string;
    markedDates?: string[];
    showExtraDays?: boolean;
    month: Date;
    isLastWeekOfList?: boolean;
    customStateCreator?: (stateInputParams: StateInputParams, defaultState: DayState) => Record<string, unknown>;
    weekContainerStyle?: ViewStyle & {
        scrollSnapAlign?: "center" | "start";
        width?: DimensionValue | string;
    };
}

interface CalendarListProps extends Omit<CalendarProps, "date" | "contentContainerStyle"> {
    currentDate?: string;
    pastMonthsCount?: number;
    futureMonthsCount?: number;
    horizontal?: boolean;
}
type CalendarListViewProps = {
    calendarSize?: {
        width?: number;
        height?: number;
    };
    showScrollIndicator?: boolean;
    decelerationRate?: "normal" | "fast" | number;
    onListEndReached?: () => void;
    onEndReachedThreshold?: number;
    /**
     * passes array of visible month dateStrings when viewAs=month
     * and passes month date object week dateString array when viewAs=week
     * @param visibleDates
     */
    onScroll?: (visibleDates: {
        month: Date;
        week: string[];
    }[] | string[]) => void;
    calendarListContentContainerStyle?: ViewStyle;
};
interface FullCalendarListViewProps {
    estimatedCalendarSize: {
        fiveWeekCalendarSize: number;
        monthTitleSize?: number;
        weekDayNamesSize?: number;
    };
    calendarVerticalGap?: number;
    CalendarSeparator?: React.ComponentType;
    showDayNamesOnTop?: boolean;
    calendarContentContainerStyle?: CalendarProps["contentContainerStyle"];
}
interface FullCalendarViewProps extends Omit<WeekProps, "weekDays" | "isWeeklyCalendarList"> {
    firstDayOfWeek?: DayIndex;
    weeksContainerStyle?: ViewStyle;
    showMonthName?: boolean;
    MonthNameComponent?: React.ComponentType<{
        month: Date;
        locale?: string;
    }>;
    WeekAnimatedTransitionComponent?: React.ComponentType<React.PropsWithChildren>;
    MonthAnimatedTransitionComponent?: React.ComponentType<React.PropsWithChildren>;
    date: string;
}

interface WeekDayProps {
    firstDayOfWeek?: DayIndex;
    weekdaysShort?: string[];
    weekdaysFormat?: "long" | "short" | "narrow";
    locale?: string;
    WeekDayNameComponent?: React.ComponentType<{
        weekDays: string[];
    }>;
}

interface CalendarProps extends Omit<FullCalendarViewProps, "month">, WeekDayProps {
    date: string;
    showDayNames?: boolean;
    viewAs?: "week" | "month";
    contentContainerStyle?: ViewStyle & {
        scrollSnapAlign?: "center" | "start";
        width?: DimensionValue | string;
    };
}
declare const Calendar: React.FC<CalendarProps>;

declare const CalendarList: React.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarListProps & FullCalendarListViewProps & CalendarListViewProps & {
    viewAs?: "week" | "month";
    onActiveMonthChange?: (activeMonth: string) => void;
} & React.RefAttributes<CalendarListRef>>>;

declare const useRenderCount: (id?: string) => number;

declare const dateStringToDate: (date: string) => Date;

declare const getDatesInRange: (startDateString: string, endDateString: string) => string[];

declare const toLocaleDateString: (date: Date) => string;

declare const getDayState: (params: StateInputParams) => DayState;

export { Calendar, CalendarList, type CalendarListRef, type DayIndex, type DayState, type InnerDayProps, type StateInputParams, dateStringToDate, getDatesInRange, getDayState, toLocaleDateString, useRenderCount };