1.0.1 • Published 4 years ago
react-calendar-personalize-color v1.0.1
react-calendar-personalize-color
A simple ReactJS component that works for calendar.
Demo
Getting Started
- First, You need to install It, just like You would do with any NPM package:
 
npm i react-calendar-personalize-color2.Then, You need to import the library component within your own component
import React from 'react'
import CalendarPersonalize from 'react-calendar-personalize-color'3.You can now start using the calendar-personalize-color components!
export default function YourComponent(){
    const [checkDate, setCheckDate] = React.useState(null);
    React.useEffect(() => {
        console.log(checkDate); // "2021-06-22"
    }, [checkDate]);
    return(
        ...
        <CalendarPersonalize onCheckDay={setCheckDate} />
    );
}Props
| Parameters | Default Value | Values | description | 
|---|---|---|---|
| primaryColor | #000 | Colorsrgb, hex, string | Main calendar color | 
| inversePrimaryColor | #FFF | Colorsrgb, hex, string | Reverse primary color of calendar, used in days. | 
| secondaryColor | #f39c12 | Colorsrgb, hex, string | Secondary calendar color, used to mark a day. | 
| inverseSecondaryColor | #000 | Colorsrgb, hex, string | Invert the secondary calendar color used to mark the day's text. | 
| onCheckDay | null | function | Role responsible for setting a date | 
| alertBlock | null | function | Role responsible for displaying any component on blocked dates | 
| dates | null | {"yyyy-MM-dd":value,} | Object responsible for defining the dates that will be valid in the calendar. E.g.: {"2021-06-22": true, "2021-06-23": false} |