Calendar

Usage#

Use it for date picking inside a popover (DateTimePicker wraps it) or a visible date filter. For scheduling views Max uses FullCalendar with the same tokens.

What you provide: mode (single, multiple, range), selected/onSelect, defaultMonth, and disabled dates. Wrap it in a positioned container (relative w-fit) so its month arrows sit on the grid.

Facts#

API#

TypeScript declarations emitted from src/components/ui/calendar.tsx.

declare function Calendar({ className, classNames, showOutsideDays, buttonVariant, formatters, components, ...props }: DayPickerProps & {
    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
}): any;
declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): any;
export { Calendar, CalendarDayButton };

Code#

The preview above, as plain React.createElement against window.DigitalCrew with realistic data. Copy it into a page that loads the bundle.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  var s = React.useState(new Date(2026, 9, 8));
  return h("div", { className: "relative w-fit" }, h(DC.Calendar, { mode: "single", selected: s[0], onSelect: s[1], defaultMonth: new Date(2026, 9, 1), className: "rounded-lg border w-fit" }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Forms#