calendar.md

Calendar

Source

An interactive grid calendar that can highlight specified dates.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { Calendar } from 'chayns-components';

// ...

<Calendar {...} />

Props

The Calendar-component takes the following props:

Name	Type	Default	Required
startDate	Date
endDate	Date
onDateSelect	function
onMonthSelect	function
selected	Date	new Date()
activated	Array<Date>
highlighted	{ dates: Array<Date>, color: string } | Array<{ dates: Array<Date>, color: string }>
categories	Array<{ date: Date | string, color: string }>
circleColor	string
activateAll	boolean	true
style	{ [key: string]: string | number }
className	string

startDate

startDate?: Date

Defines the first month that will be displayed.

---

endDate

endDate?: Date

Defines the last month that will be displayed.

---

onDateSelect

onDateSelect?: function

This callback is called when the user clicks on a date in the calendar.

---

onMonthSelect

onMonthSelect?: function

This callback is called when the currently selected month changes

---

selected

selected?: Date

The currently selected date as a JavaScript Date element.

---

activated

activated?: Array<Date>

This array defines the active dates. Has no effect when activeAll is true.

---

highlighted

highlighted?: { dates: Array<Date>, color: string } | Array<{ dates: Array<Date>, color: string }>

This prop is used to highlight dates. It takes object in the form of { dates: [...<date objects>], color: '<css color>' }, either supplied directly or in an array.

---

categories

categories?: Array<{ date: Date | string, color: string }>

This prop is used to add a small category marker for a day

---

circleColor

circleColor?: string

Circle color of selected day

---

activateAll

activateAll?: boolean

Activate all dates.

---

style

style?: { [key: string]: string | number }

A React style object that is applied to the root <div>-element.

---

className

className?: string

A classname that is applied to the root <div>-element.