Calendar

@nivo/calendar
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.

numberoptionaldefault:'Depends on device'

Adjust pixel ratio, useful for HiDPI screens.

supportsvgcanvasapi
objectoptional
px
px
px
px

Chart margin.

stringoptionaldefault:'horizontal'

defines calendar layout direction.

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.

Style
Themeoptional

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