React-native-customized-calendar NPM

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

react-native react-component react-native-component react react native mobile ios android ui calendar customized calender

@everything-registry/sub-chunk-2575

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago