react-calendar-personalize-color

A simple ReactJS component that works for calendar.

Demo

Getting Started

1. 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 | Colors[rgb, hex, string] | Main calendar color inversePrimaryColor | #FFF | Colors[rgb, hex, string] | Reverse primary color of calendar, used in days. secondaryColor | #f39c12 | Colors[rgb, hex, string] | Secondary calendar color, used to mark a day. inverseSecondaryColor | #000 | Colors[rgb, 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}