# Calendar 1

> Calendar

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/calendar-1).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/calendar-1
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/calendar-1/light.png
- Registry item: https://blocks.cnippet.dev/r/calendar-1.json
- Categories: calendar
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/calendar-1.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/badge`, `@cnippet/calendar`, `@cnippet/card`

## Files

### `registry/default/sections/calendar-1.tsx`

```tsx
//biome-ignore-all lint/suspicious/noArrayIndexKey:<>

"use client";

import * as React from "react";
import { Badge } from "@/components/ui/badge";
import { Calendar } from "@/components/ui/calendar";
import { Card } from "@/components/ui/card";

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

  const events = [
    { date: "Today", time: "10:00 AM", title: "Team Meeting" },
    { date: "Today", time: "2:30 PM", title: "Project Review" },
    { date: "Tomorrow", time: "9:00 AM", title: "Client Call" },
  ];

  return (
    <div className="w-full bg-white px-4 py-16 md:py-20 dark:bg-background">
      <div className="mx-auto max-w-6xl">
        <div className="mb-4 flex justify-center">
          <Badge className="">Schedule</Badge>
        </div>

        <div className="mb-12 text-center md:mb-16">
          <h2 className="mb-4 font-normal text-3xl text-gray-900 md:text-4xl lg:text-5xl dark:text-gray-100">
            Plan your time effectively
          </h2>
          <p className="mx-auto max-w-2xl text-gray-600 text-sm sm:text-base dark:text-gray-400">
            Stay organized with our integrated calendar and scheduling tools
          </p>
        </div>

        <div className="grid gap-8 md:grid-cols-2 lg:gap-12">
          {/* Calendar */}
          <div className="flex justify-center">
            <Calendar
              className="rounded-xl border border-gray-200 shadow-lg dark:border-neutral-700 dark:bg-neutral-900"
              mode="single"
              onSelect={setDate}
              selected={date}
            />
          </div>

          {/* Upcoming Events */}
          <div>
            <h3 className="mb-4 font-medium text-gray-900 text-lg sm:text-xl dark:text-gray-100">
              Upcoming Events
            </h3>
            <div className="space-y-4">
              {events.map((event, index) => (
                <Card
                  className="rounded-xl bg-white p-4 shadow-sm sm:p-6 dark:bg-neutral-900"
                  key={index}
                >
                  <div className="flex items-start gap-4">
                    <div className="shrink-0">
                      <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-100 dark:bg-violet-900/30">
                        <span className="font-semibold text-sm text-violet-600 dark:text-violet-400">
                          {event.time.split(":")[0]}
                        </span>
                      </div>
                    </div>
                    <div className="flex-1">
                      <h4 className="mb-1 font-medium text-gray-900 text-sm sm:text-base dark:text-gray-100">
                        {event.title}
                      </h4>
                      <p className="text-gray-600 text-xs sm:text-sm dark:text-gray-400">
                        {event.date} at {event.time}
                      </p>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
```