Chakra-Calender

Installation

using npm:

$ npm i chakra-react-calender

using yarn:

$ yarn add chakra-react-calender

Example

import { ChakraCalender } from 'chakra-react-calender';

const App=()=>{
       const value={ '2022-5-12': { value: 2, message: 'leave'}}
       const colors=['red','blue','green','pink','orange']
       return(
       <ChakraCalender
        values={value}
        legend={['leave', 'late', 'WFH']}
        colors={colors}
       />
    )}

Props

| props | value | | ----------------------- | -------------------------------------------------- | | values | {'2022-2-3':{value:number,message:string} | | colors | string [ ] | | hasTooltip | Boolean | | tooltip | (date: string, message: string) => React.ReactNode | | cellWidth | String | | cellHeight | String | | cellSpecing | String | | gridGap | String | | padding | String | | backgroundColor | String | | monthsLabel | Boolean | | monthsLabelFontSize | String | | daysLabel | Boolean | | legendGap | String | | cellBorderRadius | String | | legend | string [ ] | | legendLabelGap | String | | legendLabelBorderRadius | String | | year | String | | height | String | | width | String | | margin | String |

Features

• will update soon