Skip to content
Vy logo
Components

Calendar

An interactive calendar component used to pick a date or a range of two dates

Examples

A simple calendar

<CalendarProvider>
  <Calendar/>
</CalendarProvider>

Range calendar

<CalendarProvider mode="range">
  <Calendar />
</CalendarProvider>

Range calendar with min and max values

<CalendarProvider
  mode="range"
  minValue={today(getLocalTimeZone())}
  maxValue={today(getLocalTimeZone()).add({ days: 120 })}
>
  <Calendar />
</CalendarProvider>

Dual view calendar (ranged)

<CalendarProvider
  mode="range"
  minValue={today(getLocalTimeZone())}
  maxValue={today(getLocalTimeZone()).add({ days: 120 })} 
  visibleDuration={{ months: 2 }}
>
  <DialogRoot size="cover">
    <DialogTrigger asChild>
      <Button size="md">
        Open dual view calendar
      </Button>
    </DialogTrigger>
    <DialogContent width="fit-content">
      <DialogHeader>
        <DialogTitle>Dual view calendar</DialogTitle>
      </DialogHeader>
      <DialogBody>
        <Calendar dualView/>
      </DialogBody>
      <DialogFooter>
        <DialogActionTrigger asChild>
          <Button variant="primary" size="lg">Lukk</Button>
        </DialogActionTrigger>
      </DialogFooter>
    </DialogContent>
  </DialogRoot>
</CalendarProvider>

Scroll view calendar (ranged)

<CalendarProvider
  mode="range"
  minValue={today(getLocalTimeZone())}
  maxValue={today(getLocalTimeZone()).add({ days: 120 })} 
  visibleDuration={{ months: 5 }}
>
  <Drawer size="md" placement="bottom">
    <DrawerTrigger asChild>
      <Button variant="primary" size="md">
        Open scroll view calendar
      </Button>
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
      </DrawerHeader>
      <DrawerBody>
        <Flex flex={1} justifyContent="center">
          <ScrollCalendar />
        </Flex>
      </DrawerBody>
    </DrawerContent>
  </Drawer>
</CalendarProvider>