Calendar

@nivo/calendarsvgisomorphic
svgcanvashttp api

This component is heavily inspired by this demo.

The responsive alternative of this component is ResponsiveCalendar, it also offers a canvas implementations, see CalendarCanvas.

See the dedicated guide on how to setup legends for this component.

Actions Logs
Start interacting with the chart to log actions
Base
object[]required
Chart data.
string | Daterequired
start date
string | Daterequired
end date
numberrequired
Chart width.
numberrequired
Chart height.
stringoptionaldefault:'horizontal'
defines calendar layout direction.
objectoptional
px
px
px
px
Chart margin.
stringoptionaldefault:'center'
center
defines how calendar should be aligned inside chart container.
number | 'auto'optionaldefault:0
auto
Minimum value.
number | 'auto'optionaldefault:'auto'
auto
Maximum value.
numberoptionaldefault:'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
supportsvgcanvasapi
Style
optional
Define style for common elements such as labels, axes…
string[]optionaldefault:['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560']
Cell colors.
stringoptionaldefault:'#fff'
   #eeeeee
color to use to fill days without available value.
Years
numberoptionaldefault:30
px
define spacing between each year row/column depending on the direction.
(year: number) => string | numberoptional
can be used to customize years label, returns 'YYYY' by default.
'before' | 'after'optionaldefault:'before'
defines year legends position.
numberoptionaldefault:10
px
define offset from year edge to its label.
Months
numberoptionaldefault:0
px
define spacing between each month row/column depending on the direction.
numberoptionaldefault:2
px
width of month borders.
supportsvgcanvasapi
stringoptionaldefault:'#000'
   #ffffff
color to use for months border.
supportsvgcanvasapi
(year: number, month: number, date: Date) => string | numberoptional
can be used to customize months label, returns abbreviated month name (english) by default. This can be used to use a different language
'before' | 'after'optionaldefault:'before'
defines month legends position.
numberoptionaldefault:10
px
define offset from month edge to its label.
Days
numberoptionaldefault:0
px
define spacing between each day cell.
numberoptionaldefault:1
px
width of days border.
stringoptionaldefault:'#000'
   #ffffff
color to use for days border.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
supportsvgcanvasapi
(day, event) => voidoptional
onClick handler, it receives clicked day data and mouse event.
supportsvgcanvasapi
Functionoptional
Custom tooltip component.
supportsvgcanvasapi
booleanoptional
   Showcase custom tooltip.
supportsvgcanvasapi