About
Here is Calendar component
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Calendar to your project and fits it to your theme.
Code
How Calendar is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { DatePicker, parseDate } from "@ark-ui/react/date-picker";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
const NUM_OF_MONTHS = 2;
export default function TwoMonthsDatePicker() {
return (
<DatePicker.Root
inline
defaultValue={[
parseDate(new Date()),
parseDate(new Date()).add({ days: 25 }),
]}
selectionMode="range"
timeZone={Intl.DateTimeFormat().resolvedOptions().timeZone}
numOfMonths={NUM_OF_MONTHS}
>
<DatePicker.Content className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xs py-3 inline-block">
<DatePicker.View
view="day"
className="flex divide-x divide-gray-200 dark:divide-gray-700 relative"
>
<nav className="absolute w-full top-0 flex justify-between px-3 z-10">
<DatePicker.PrevTrigger className="p-2.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300">
<ChevronLeftIcon className="w-4 h-4" />
</DatePicker.PrevTrigger>
<DatePicker.NextTrigger className="p-2.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300">
<ChevronRightIcon className="w-4 h-4" />
</DatePicker.NextTrigger>
</nav>
<DatePicker.Context>
{(api) =>
Array.from({ length: NUM_OF_MONTHS }).map((_, index) => {
const offset = api.getOffset({ months: index });
return (
<div key={index} className="px-3">
<DatePicker.ViewControl className="flex justify-center items-center mx-10 mb-1 h-9">
<DatePicker.ViewTrigger className="z-20 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 px-2 py-1 rounded-md transition-colors">
<span>
{new Intl.DateTimeFormat("default", {
month: "long",
}).format(
offset.visibleRange.start.toDate("UTC")
)}{" "}
{offset.visibleRange.start.year}
</span>
</DatePicker.ViewTrigger>
</DatePicker.ViewControl>
<DatePicker.Table>
<DatePicker.TableHead>
<DatePicker.TableRow>
{api.weekDays.map((weekDay, id) => (
<DatePicker.TableHeader
key={id}
className="text-sm font-medium text-gray-500 dark:text-gray-400 w-9 h-7 text-center"
>
{weekDay.narrow}
</DatePicker.TableHeader>
))}
</DatePicker.TableRow>
</DatePicker.TableHead>
<DatePicker.TableBody>
{offset.weeks.map((week, id) => (
<DatePicker.TableRow key={id}>
{week.map((day, id) => (
<DatePicker.TableCell
key={id}
value={day}
className="pe-0 ps-0"
visibleRange={offset.visibleRange}
>
<DatePicker.TableCellTrigger className="relative w-9 h-9 text-sm transition-colors data-outside-range:pointer-events-none flex items-center justify-center font-medium cursor-pointer data-today:after:content-[''] data-today:after:absolute data-today:after:bottom-0.5 data-today:after:w-1 data-today:after:h-1 data-today:after:rounded-full data-today:after:bg-gray-200 data-today:not-data-range-start:not-data-range-end:not-data-hover-range-start:not-data-hover-range-end:after:bg-gray-900 dark:data-today:after:bg-gray-900 data-outside-range:text-gray-400 dark:data-outside-range:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 data-in-range:not-data-range-start:not-data-range-end:not-data-hover-range-start:not-data-hover-range-end:bg-gray-100 dark:data-in-range:not-data-range-start:not-data-range-end:not-data-hover-range-start:not-data-hover-range-end:bg-gray-700 data-range-start:bg-gray-900 data-range-start:text-white dark:data-range-start:bg-gray-200 dark:data-range-start:text-gray-900 data-range-end:bg-gray-900 data-range-end:text-white dark:data-range-end:bg-gray-200 dark:data-range-end:text-gray-900 data-hover-range-start:bg-gray-900 data-hover-range-start:text-white dark:data-hover-range-start:bg-gray-200 dark:data-hover-range-start:text-gray-900 data-hover-range-end:bg-gray-900 data-hover-range-end:text-white dark:data-hover-range-end:bg-gray-200 dark:data-hover-range-end:text-gray-900 not-data-in-range:rounded-lg data-range-start:rounded-l-lg data-range-end:rounded-r-lg data-hover-range-start:rounded-l-lg data-hover-range-end:rounded-r-lg">
{day.day}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</div>
);
})
}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="month">
<DatePicker.Context>
{(api) => (
<>
<DatePicker.ViewControl className="flex items-center justify-between mb-4">
<DatePicker.PrevTrigger className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300">
<ChevronLeftIcon className="w-4 h-4" />
</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger className="text-base font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 px-2 py-1 rounded-md transition-colors">
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300">
<ChevronRightIcon className="w-4 h-4" />
</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table className="w-full border-separate border-spacing-y-0.5">
<DatePicker.TableBody>
{api
.getMonthsGrid({ columns: 4, format: "short" })
.map((months, id) => (
<DatePicker.TableRow key={id}>
{months.map((month, id) => (
<DatePicker.TableCell key={id} value={month.value}>
<DatePicker.TableCellTrigger className="w-16 h-10 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 rounded-lg transition-colors data-selected:bg-gray-900 data-selected:text-white data-selected:rounded-lg dark:data-selected:bg-gray-200 dark:data-selected:text-gray-900 flex items-center justify-center font-medium">
{month.label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
<DatePicker.View view="year">
<DatePicker.Context>
{(api) => (
<>
<DatePicker.ViewControl className="flex items-center justify-between mb-4">
<DatePicker.PrevTrigger className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300">
<ChevronLeftIcon className="w-4 h-4" />
</DatePicker.PrevTrigger>
<DatePicker.ViewTrigger className="text-base font-semibold text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 px-2 py-1 rounded-md transition-colors">
<DatePicker.RangeText />
</DatePicker.ViewTrigger>
<DatePicker.NextTrigger className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors text-gray-700 dark:text-gray-300">
<ChevronRightIcon className="w-4 h-4" />
</DatePicker.NextTrigger>
</DatePicker.ViewControl>
<DatePicker.Table className="w-full border-separate border-spacing-y-0.5">
<DatePicker.TableBody>
{api.getYearsGrid({ columns: 4 }).map((years, id) => (
<DatePicker.TableRow key={id}>
{years.map((year, id) => (
<DatePicker.TableCell key={id} value={year.value}>
<DatePicker.TableCellTrigger className="w-16 h-10 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 rounded-lg transition-colors data-selected:bg-gray-900 data-selected:text-white data-selected:rounded-lg dark:data-selected:bg-gray-200 dark:data-selected:text-gray-900 flex items-center justify-center font-medium">
{year.label}
</DatePicker.TableCellTrigger>
</DatePicker.TableCell>
))}
</DatePicker.TableRow>
))}
</DatePicker.TableBody>
</DatePicker.Table>
</>
)}
</DatePicker.Context>
</DatePicker.View>
</DatePicker.Content>
</DatePicker.Root>
);
}
Dependencies
More by Abraham
View all
Signature Pad
107
Carousel
81
timeline-animation
65
Basic Toast
56
QR Code
51
Menu
50
Steps
43
Angle Slider
42