Mini Calendar

A composable mini calendar component for picking dates close to today.

Installation

npx love-ui@latest add mini-calendar

Usage

import { MiniCalendar, MiniCalendarNavigation, MiniCalendarDays, MiniCalendarDay } from "@/components/mini-calendar"

<MiniCalendar>
  <MiniCalendarNavigation />
  <MiniCalendarDays>
    {(date) => <MiniCalendarDay key={date.toISOString()} date={date} />}
  </MiniCalendarDays>
</MiniCalendar>

Features

Displays a configurable number of consecutive days (default: 5) in a compact horizontal layout
Navigation with chevron buttons to move between date ranges by the configured number of days
Fully composable with separate components for navigation, days container, and individual days
Supports both controlled and uncontrolled usage with value/defaultValue and onValueChange props
Highlights today's date with accent background and selected date with default button variant
Built with accessibility in mind using semantic HTML and ARIA attributes
Customizable styling through className props on all components
Context-based state management between components using React Context
Supports custom start dates with startDate/defaultStartDate and onStartDateChange props

Examples

Basic Usage

"use client";

import {
  MiniCalendar,
  MiniCalendarDay,
  MiniCalendarDays,
  MiniCalendarNavigation,
} from "../../../../../packages/mini-calendar";

const Example = () => (
  <MiniCalendar>
    <MiniCalendarNavigation direction="prev" />
    <MiniCalendarDays>
      {(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}
    </MiniCalendarDays>
    <MiniCalendarNavigation direction="next" />
  </MiniCalendar>
);

export default Example;

Controlled

"use client";

import {
  MiniCalendar,
  MiniCalendarDay,
  MiniCalendarDays,
  MiniCalendarNavigation,
} from "../../../../../packages/mini-calendar";
import { useState } from "react";

const Example = () => {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);

  return (
    <div className="space-y-4">
      <MiniCalendar onValueChange={setSelectedDate} value={selectedDate}>
        <MiniCalendarNavigation direction="prev" />
        <MiniCalendarDays>
          {(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}
        </MiniCalendarDays>
        <MiniCalendarNavigation direction="next" />
      </MiniCalendar>

      {selectedDate && (
        <p className="text-muted-foreground text-sm">
          Selected:{" "}
          {selectedDate.toLocaleDateString("en-US", {
            weekday: "long",
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </p>
      )}
    </div>
  );
};

export default Example;

Custom Layout

"use client";

import {
  MiniCalendar,
  MiniCalendarDay,
  MiniCalendarDays,
  MiniCalendarNavigation,
} from "../../../../../packages/mini-calendar";
import { Button } from "@/components/ui/button";
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";

const Example = () => (
  <MiniCalendar className="bg-card p-4 shadow-lg">
    <div className="flex items-center gap-4">
      <MiniCalendarNavigation asChild direction="prev">
        <Button size="icon" variant="outline">
          <ArrowLeftIcon className="size-4" />
        </Button>
      </MiniCalendarNavigation>

      <MiniCalendarDays className="gap-2">
        {(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}
      </MiniCalendarDays>

      <MiniCalendarNavigation asChild direction="next">
        <Button size="icon" variant="outline">
          <ArrowRightIcon className="size-4" />
        </Button>
      </MiniCalendarNavigation>
    </div>
  </MiniCalendar>
);

export default Example;

Custom Days

"use client";

import {
  MiniCalendar,
  MiniCalendarDay,
  MiniCalendarDays,
  MiniCalendarNavigation,
} from "../../../../../packages/mini-calendar";

const Example = () => (
  <MiniCalendar days={7}>
    <MiniCalendarNavigation direction="prev" />
    <MiniCalendarDays>
      {(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}
    </MiniCalendarDays>
    <MiniCalendarNavigation direction="next" />
  </MiniCalendar>
);

export default Example;

Calendar Gantt