react-native-label-calendars v1.2.0

React Native Label Calendars 🗓️

This module includes various customizable React-Native calendar components.

The package is both Android and iOS compatible.

Try it out

You can run example module by performing these steps:

$ git clone git@github.com:wonbeanie/react-native-label-calendars.git
$ cd example
$ npm install
$ react-native run-android

Installation

$ npm install --save react-native-label-calendars

Usage

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

All parameters for components are optional. By default the month of current local date will be displayed.

Calendars

Use the Calendars

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

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

export default App;

Default parameters

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

Props

Option Props

disableMonthChange

This is the display button of the calendar move button. |option|Type|Default|Description| |---|---|---|---| |next|boolean|true|If True, the move button will be activated next month.| |prev|boolean|true|If True, the move button will be activated last month.|

disableMonthChange : {
    next : false,
    prev : false
}

enableLabels

This is the label display button. |option|Type|Default|Description| |---|---|---|---| |enableLabels|boolean|true|If True, the label calendar is activated.|

enableLabels : true

selectDateColor

This is the option to modify the selected date color. |option|Type|Default|Description| |---|---|---|---| |selectDateColor|string|"#0077CC"|Date color when selecting a date.|

selectDateColor : "#0077CC"

onSelectDate

This is a handler used to select a date. |option|Type|Default|Description| |---|---|---|---| |onSelectDate|Function|( fullDate : string)=>void|This is a handler used to select a date.| |fullDate|string|yyyy-mm-dd|Returns the value of the selected date.| |label|string|undefined|Returns the label for the selected date.|

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

titleFormat

It is a title format that shows the year and month. |option|Type|Default|Description| |---|---|---|---| |titleFormat|string|"{month} {year}"|There are a total of three types: "{month}", "{year}", and "{koMonth}".|

titleFormat : "{month} {year}"

weekLangFormat

This is the day of the week display format. |option|Type|Default|Description| |---|---|---|---| |weekLangFormat|Array<string>|"Mon","Tue","Wed","Thu","Fir","Sat","Sun"|0 index is Monday.|

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

monthLangFormat

This is the day of the month display format. |option|Type|Default|Description| |---|---|---|---| |monthLangFormat|Array<string>|"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"|0 index is January.|

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

prevButton

It’s a custom component that goes back. |option|Type|Default|Description| |---|---|---|---| |prevButton|Function|()=>false|When returning an element, the back button changes.|

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

nextButton

It’s a custom component that goes forward. |option|Type|Default|Description| |---|---|---|---| |nextButton|Function|()=>false|The forward button changes when returning the element.|

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

toDayBorderWidth

Customizing the thickness of the toDay border. |option|Type|Default|Description| |---|---|---|---| |toDayBorderWidth|number|3|You can modify the width of the border marked on today's date.|

toDayBorderWidth : 3

onPrevPress

It’s a backward handler function. |option|Type|Default|Description| |---|---|---|---| |onPrevPress|Function|(prevTitle : string)=>{console.log('Prev Title ${prevTitle}');}|| |prevTitle|string|yyyy-mm-dd|Returns the value of the selected date.|

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

onNextPress

It’s a backward handler function. |option|Type|Default|Description| |---|---|---|---| |onNextPress|Function|(nextTitle : string)=>{console.log('Next Title ${nextTitle}');}|| |nextTitle|string|yyyy-mm-dd|Returns the value of the selected date.|

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

moveDateRange

Limit date movement using Month Button. |option|Type|Default|Description| |---|---|---|---| |min|yyyy-mm|""|Unable to move to before that date.| |max|yyyy-mm|""|Unable to move to after that date.|

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

overDateClickToMove

Restrict the ability to move when clicking on a date other than the current month of the calendar. |option|Type|Default|Description| |---|---|---|---| |overDateClickToMove|boolean|true|true is move to Month|

overDateClickToMove : true

Types

LabelData

This is a list of date data to be labeled. |option|Type|Description| |---|---|---| |date|string|It is a date in the form of yyyy-mm-ddor Date.| |onLabel|Array<string>|This is the label that should be displayed in the date.|

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

Label

This is the label list to be displayed. |option|Type|Description| |---|---|---| |name|string|It's a name that goes inside onLabel.| |color|string|Color labels to be displayed in the calendar.|

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