react-native-customized-calendar

Introduction

A React-Native calendar component to show a calendar. This calendar is fully customized, you can modify it as per your need.

• Navigate to different date, month and year
• Handle date with custom onPress function
• Add reminders with custom colors

Calender View | Year Selection :-------------------------:|:-------------------------: |

Calender View With Reminder | :-------------------------:

Installation

If using yarn:

yarn add react-native-customized-calendar

If using npm:

npm i react-native-customized-calendar

Usage

import Calender from 'react-native-customized-calendar'

Simply place a <Calender /> tag for showing calendar.

<View style={{ flex:1, }}>
        <Calender />
    </View>

For reminders pass reminders props as array

<View style={{ flex:1, }}>
        <Calender 
            reminders = [
                {date:2, color:"#40E0D0"},
                {date:11, color:"#FFBF00"},
                {date:14, color:"#9FE2BF"}
            ]
        />
    </View>

Documentation

Calender Component

| Name | Description | Default | Type | |-----------------------------------------|-------------------------------------------------------------------------------|------------|---------| | fontSize | Font size of entire component | 16 | Int |
| primaryColor | Primary color of component | #2196F3 | String | | onPressDay | OnPress function of calender cell | ()=>{} | Func | | dateTextColor | Color of date text | black | String | | currentDateTextColor | Color of current date text | white | String | | showCurrentDate | From this props you can set either current date should be highlight or not | True | Bool | | weekendBackgroundColor | Weekend cell column background color | gray | String | | weekdaysBackgroundColor | Weekdays cell column background color | white | String | | emptyDaysBackgroundColor | Background color of empty cell | lightgray | String | | monthButtonTextColor | Current selected month name text color | white | String | | monthNameTextColor | Next and previous month name text color | black | String | | backForwardIconTintColor | Back and Forward Icon tint color | gray | String | | plusMinusButtonContainerBackgroundColor | Year increment and decrement button background color | whitesmoke | String | | plusMinusButtonContainerBorderColor | Year increment and decrement button border color | lightgray | String | | plusMinusIconTintColor | Plus minus button icon tint color | gray | String | | yearColor | Year text color | black | String | | yearSelectTextColor | Year select button text color | black | String | | selectButtonBackgroundColor | Year select button background color | whitesmoke | String | | selectButtonBorderColor | Year select button border color | lightgray | String | | containerStyle | Container style for additional styling | {} | Object | | calenderItemContainerBorderColor | Calender cell border color | lightgray | String | | reminders | Set reminders on calender with different colors | [] | Array | | reminderDateColor | Date text of reminders date | white | String |

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Author

Jaweed Shuja

License

MIT