calendar-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar-example",
  "title": "Calendar",
  "registryDependencies": [
    "button",
    "calendar",
    "card",
    "field",
    "input",
    "label",
    "popover",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-maia/examples/calendar-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-maia/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}