MiniCalendar React

Installation

npm i @minicalendar/react react luxon

Usage

import React, { useState, useMemo, useCallback } from "react"
import {
    createCachedGetDateTimes,
    DateTimeSelector,
    type GetDateTimes,
} from "@minicalendar/react"
import "@minicalendar/react/style.css"

export default function X() {
    const [dateTime, setDateTime] = useState<string | null>(null)

    const getDateTimes: GetDateTimes = useCallback(async (start, end) => {
        // Fetch or generate available date-times between start and end
        const dateTimes: string[] = []

        return dateTimes
    }, [])

    const getDateTimesWithCache = useMemo(
        () => createCachedGetDateTimes(getDateTimes, { zone: "Europe/London" }),
        [getDateTimes]
    )

    return (
        <DateTimeSelector
            dateTime={dateTime}
            setDateTime={setDateTime}
            getDateTimes={getDateTimesWithCache}
        />
    )
}

Screenshots