# V calendar 11

> Date Picker with Presets

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-calendar-11).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-calendar-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-calendar-11-light-ed50baad612b1388.png
- Registry item: https://ui.cnippet.dev/r/v-calendar-11.json
- Categories: calendar
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-11.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/calendar`

## Files

### `registry/default/variants/v-calendar-11.tsx`

```tsx
"use client";

import * as React from "react";
import { Button } from "@/registry/default/ui/button";
import { Calendar } from "@/registry/default/ui/calendar";

function addDays(base: Date, days: number): Date {
  const d = new Date(base);
  d.setDate(d.getDate() + days);
  return d;
}

function nextWeekday(dayOfWeek: number): Date {
  const today = new Date();
  const diff = (dayOfWeek - today.getDay() + 7) % 7 || 7;
  return addDays(today, diff);
}

const today = new Date();

const presets = [
  { date: today, label: "Today" },
  { date: addDays(today, 1), label: "Tomorrow" },
  { date: nextWeekday(1), label: "Next Monday" },
  { date: addDays(today, 7), label: "In 1 week" },
  { date: addDays(today, 14), label: "In 2 weeks" },
  { date: addDays(today, 30), label: "In 1 month" },
];

export default function Particle() {
  const [date, setDate] = React.useState<Date | undefined>(today);

  return (
    <div className="overflow-hidden rounded-xl border">
      <div className="flex flex-wrap gap-1.5 border-b bg-muted/40 px-3 py-2.5">
        {presets.map((p) => (
          <Button
            className="h-7 text-xs"
            key={p.label}
            onClick={() => setDate(p.date)}
            size="sm"
            variant={
              date?.toDateString() === p.date.toDateString()
                ? "default"
                : "outline"
            }
          >
            {p.label}
          </Button>
        ))}
      </div>
      <Calendar mode="single" onSelect={setDate} selected={date} />
      {date && (
        <div className="border-t px-4 py-2.5 text-center text-muted-foreground text-sm">
          {date.toLocaleDateString("en-US", {
            day: "numeric",
            month: "long",
            weekday: "long",
            year: "numeric",
          })}
        </div>
      )}
    </div>
  );
}
```