1.0.1 • Published 3 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-color
2.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} |