Skip to content
Vy logo
  • Spor
  • Resources
Components

Calendar

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

FigmaGitHub

Code examples

<CalendarProvider>
  <Calendar/>
</CalendarProvider>

Code

<CalendarProvider />

import { CalendarProvider } from "@vygruppen/spor-react";

Provides a context for calendar components. Must be used as a wrapper around the calendar views.

Type definitions:

type CalendarMode = "single" | "range"
type CalendarValue = [CalendarDate | null, CalendarDate | null]

Props

Name
Type
Required?
Description
modeCalendarModeDecides whether the calendar should be a single or a range selection. Defaults to single.
valueCalendarValueControlled value of the calendar
defaultValueCalendarValueDefault value of the calendar. Useful if you don't want to control the value.
onChange(value: CalendarValue) => voidCalled when the selected date or range changes
visibleDurationDateDurationThe visible duration of the calendar. This defines how many months are shown at once. Default: { months: 1 } If using Calendar with dualView=true, this should be set to { months: 2 }. If using ScrollCalendar, this should be set to how many months you want to show in total as it doesn't support pagination.

<Calendar />

import { Calendar } from "@vygruppen/spor-react";

Standard calendar view. Also supports dual view.

Props

Name
Type
Required?
Description
dualViewbooleanEnable to use a dual calendar with two columns

<ScrollCalendar />

import { ScrollCalendar } from "@vygruppen/spor-react";

A calendar view meant to be used in a scrolling context. Will display all months in visibleDuration in a list. Accepts any BoxProps.