import Calendars from 'react-native-label-calendars';

const App = () => {
  return (
    <Calendars />
  );
};

export default App;

<Calendars
    onLabelData={[
        {
            date : "2021-11-03",
            onLabel : ["Gameming"]
        },
        {
            date : "2021-11-05",
            onLabel : ["Jumping"]
        }
    ]}
    labels={[
        {
            name : 'Gameming',
            color : "#39D291"
        },
        {
            name : 'Jumping',
            color : "#40BADC"
        },
    ]}
    option={{
        //This is the display button of the calendar move button.
        disableMonthChange : {
            next : false,
            prev : false
        },
        //This is the label display button.
        enableLabels : true,
        //This is the option to modify the selected date color.
        selectDateColor : "#0077CC",
        //This is a handler used to select a date.
        onSelectDate : (fullDate : string, label ?: string)=>{console.log(`Select Date ${fullDate}`);},
        //It is a title format that shows the year and month.
        titleFormat : "{month} {year}",
        //This is the day of the week display format.
        weekLangFormat : ["Mon","Tue","Wed","Thu","Fir","Sat","Sun"],
        //This is the day of the month display format.
        monthLangFormat : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
        //It's a custom component that goes back.
        prevButton : ()=>false,
        //It's a custom component that goes forward.
        nextButton : ()=>false,
        //Customized title View style.
        titleViewStyle : {},
        //Customized title Text style.
        titleStyle : {},
        //Customized date Pressable style.
        onPressStyle : {},
        //Customized toDay Text style.
        toDayTextStyle : {},
        //Customized date Text style.
        dateTextStyle : {},
        //Customized toDay View style.
        toDayViewStyle : {},
        //Customized toDay Border View style.
        toDayBorderViewStyle : {},
        //Customized toDay Background View style.
        toDayBackgroundViewStyle : {},
        //Customized date Border View style.
        dateBorderViewStyle : {},
        //Customized date Background View style.
        dateBackgroundViewStyle : {},
        //Customizing the thickness of the toDay border.
        toDayBorderWidth : 3,
        //It's a backward handler function.
        onNextPress : (nextTitle : string)=>{console.log(`Next Title ${nextTitle}`);},
        //This is the forward handler function.
        onPrevPress : (prevTitle : string)=>{console.log(`Prev Title ${prevTitle}`);},
        //Limit date movement using Month Button.
        moveDateRange : {
            min : "",
            max : "",
        },
        //Restrict the ability to move when clicking on a date other than the current month of the calendar
        overDateClickToMove : true
    }}
/>

disableMonthChange : {
    next : false,
    prev : false
}

enableLabels : true

selectDateColor : "#0077CC"

onSelectDate : (fullDate : string, label ?: string) => {
    console.log(`Select Date ${fullDate}`);
}

titleFormat : "{month} {year}"

weekLangFormat : ["Mon","Tue","Wed","Thu","Fir","Sat","Sun"]

monthLangFormat : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]

prevButton : ()=>{
    return (
        <View>
            <Text>Prev</Text>
        <View/>
    )
}

nextButton : ()=>{
    return (
        <View>
            <Text>Next</Text>
        <View/>
    )
}

toDayBorderWidth : 3

onPrevPress : (prevTitle : string) => {
    console.log(`Prev Title ${prevTitle}`);
}

onNextPress : (nextTitle : string) => {
    console.log(`Next Title ${nextTitle}`);
}

moveDateRange : {
    min : "",
    max : "",
}

overDateClickToMove : true

{
    date : "2021-11-03",
    onLabel : ["Runner"]
}

{
    name : "Runner",
    color : "#000"
}