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} |