1.0.1 • Published 3 years ago

react-calendar-personalize-color v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

License: MIT Version: 0.0.3 Platform: IOS and Android

react-calendar-personalize-color

A simple ReactJS component that works for calendar.

Demo

Capturar


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

ParametersDefault ValueValuesdescription
primaryColor#000Colorsrgb, hex, stringMain calendar color
inversePrimaryColor#FFFColorsrgb, hex, stringReverse primary color of calendar, used in days.
secondaryColor#f39c12Colorsrgb, hex, stringSecondary calendar color, used to mark a day.
inverseSecondaryColor#000Colorsrgb, hex, stringInvert the secondary calendar color used to mark the day's text.
onCheckDaynullfunctionRole responsible for setting a date
alertBlocknullfunctionRole responsible for displaying any component on blocked dates
datesnull{"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}