Calendar - Supabase — ContextQMD

About

The Calendar component is built on top of React DayPicker.

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

bash

npx shadcn-ui@latest add calendar

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

bash

npm install react-day-picker date-fns

<Step>Add the Button component to your project.</Step>

The Calendar component uses the Button component. Make sure you have it installed in your project.

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Usage

tsx

import { Calendar } from '@/components/ui/calendar'

tsx

const [date, setDate] = React.useState<Date | undefined>(new Date())

return <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />

See the React DayPicker documentation for more information.

Date Picker

You can use the <Calendar> component to build a date picker. See the Date Picker page for more information.

Examples

Form