# react-native-label-calendars

> [![Version](https://img.shields.io/npm/v/react-native-label-calendars)](https://www.npmjs.com/package/react-native-label-calendars)

Latest version **1.2.0** (published 2023-06-29) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-native-label-calendars
pnpm add react-native-label-calendars
yarn add react-native-label-calendars
bun add react-native-label-calendars
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2023-06-29 |
| First published | 2021-11-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 56.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | wonbeanie |
| Maintainers | wonbeanie |
| Keywords | react native, calendars, label calendars, label |

## Links

- npm: https://www.npmjs.com/package/react-native-label-calendars
- Repository: https://github.com/wonbeanie/react-native-label-calendars
- Homepage: https://github.com/wonbeanie/react-native-label-calendars#readme
- Issues: https://github.com/wonbeanie/react-native-label-calendars/issues
- npm.io page: https://npm.io/package/react-native-label-calendars

## Dependencies (2)

- [react](https://npm.io/package/react.md) 18.2.0
- [react-native](https://npm.io/package/react-native.md) 0.71.8

## Recent versions

- 1.2.0 (latest) — 2023-06-29
- 1.1.1 — 2023-06-22
- 1.1.0 — 2023-05-26
- 1.0.5 — 2023-05-24
- 1.0.4 — 2023-05-21
- 1.0.3 — 2023-05-21
- 1.0.2 — 2023-05-21
- 1.0.1 — 2023-05-21
- 0.1.0 — 2023-05-21
- 0.0.16 — 2021-11-04
- 0.0.15 — 2021-11-03
- 0.0.14 — 2021-11-03
- 0.0.13 — 2021-11-03
- 0.0.12 — 2021-11-02
- 0.0.11 — 2021-11-02
- … 10 more at https://npm.io/package/react-native-label-calendars/versions

## README

# React Native Label Calendars 🗓️
[![Version](https://img.shields.io/npm/v/react-native-label-calendars)](https://www.npmjs.com/package/react-native-label-calendars)
<!-- [![Version](https://img.shields.io/npm/dw/react-native-label-calendars)](https://www.npmjs.com/package/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

<kbd>
  <img src="https://github.com/wonbeanie/react-native-label-calendars/blob/develop/TestImage.png?raw=true">
</kbd>

#### Use the Calendars

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

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

export default App;
```

#### Default parameters

```typescript
<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
|Prop Name|Type|Essential|Description|
|---|---|---|---|
|onLabelData|Array<[LabelData](#LabelData)>|false|Date Label Data|
|labels|Array<[Label](#Label)>|false|Label List Data|
|option|Object|false|{}|options|

### Option Props
|Option Name|Type|Description|
|---|---|---|
|[disableMonthChange](#disableMonthChange)|`Object`|This is the display button of the calendar move button.|
|[enableLabels](#enableLabels)|`boolean`|This is the label display button.|
|[selectDateColor](#selectDateColor)|`string`|This is the option to modify the selected date color.|
|[onSelectDate](#onSelectDate)|`Function`|This is a handler used to select a date.|
|[titleFormat](#titleFormat)|`string`|It is a title format that shows the year and month.|
|[weekLangFormat](#weekLangFormat)|`Array<string>`|This is the day of the week display format.|
|[monthLangFormat](#monthLangFormat)|`Array<string>`|This is the day of the month display format.|
|[prevButton](#prevButton)|`Function`|It's a custom component that goes back.|
|[nextButton](#nextButton)|`Function`|It's a custom component that goes forward.|
|titleViewStyle|`ViewStyle`|Customized title View style.|
|titleStyle|`TextStyle`|Customized title Text style.|
|onPressStyle|`ViewStyle`|Customized date Pressable style.|
|toDayTextStyle|`TextStyle`|Customized toDay Text style.|
|dateTextStyle|`TextStyle`|Customized date Text style.|
|toDayViewStyle|`ViewStyle`|Customized toDay View style.|
|toDayBorderViewStyle|`ViewStyle`|Customized toDay Border View style.|
|toDayBackgroundViewStyle|`ViewStyle`|Customized toDay Background View style.|
|dateBorderViewStyle|`ViewStyle`|Customized date Border View style.|
|dateBackgroundViewStyle|`ViewStyle`|Customized date Background View style.|
|[toDayBorderWidth](#toDayBorderWidth)|`number`|Customizing the thickness of the toDay border.|
|[onNextPress](#onNextPress)|`Function`|It's a backward handler function.|
|[onPrevPress](#onPrevPress)|`Function`|This is the forward handler function.|
|[moveDateRange](#moveDateRange)|`Object`|Limit date movement using Month Button.|
|[overDateClickToMove](#overDateClickToMove)|`boolean`|Restrict the ability to move when clicking on a date other than the current month of the calendar.|

#### 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.|
```typescript
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.|
```typescript
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.|
```typescript
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.|

```typescript
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}".|

```typescript
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.|

```typescript
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.|

```typescript
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.|

```typescript
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.|

```typescript
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.|

```typescript
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.|

```typescript
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.|

```typescript
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.|
```typescript
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|
```typescript
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.|
```typescript
{
    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.|
```typescript
{
    name : "Runner",
    color : "#000"
}
```

---
_Source: https://npm.io/package/react-native-label-calendars · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._