React-native-daily-calendar NPM

:control_knobs: react-native-daily-calendar

A highly customizable Month and Date Picker component for React Native using momentjs. Support this project with a ★ on Github.

:inbox_tray: Installation

You can install this package using either Yarn or NPM.

npm install react-native-daily-calendar

yarn add react-native-daily-calendar

react-native-daily-calendar requires moment to be installed, which is a peer dependency.

:bulb: Usage

import DailyCalendar from 'react-native-daily-calendar';

function App() {
   const [selectedDate, setSelectedDate] = useState(moment().format("DD-MM-YYYY"))
  return (
   <DailyCalendar
     onDateChangeCalendar={value => {
     setSelectedDate(moment(value, 'YYYY-MM-DD').format('DD-MM-YYYY'));
     }}
    />
  );
}

:book: Props

Property	Type	Default	Description
isMonthPickerReq	bool	true	Boolean for month picker.
isDatePickerReq	bool	true	Boolean for date picker.
onDateChangeCalendar	function	null	Callback called when the user changing the date.
onMonthChangeCalendar	function	null	Callback called when the user changing the month.
monthContainerStyle	ViewStyle	null	Custom styling for month container
LeftArrowIcon	JSX.Element	Default Icon	Month Picker Right Icon slider.
RightArrowIcon	JSX.Element	Default Icon	Month Picker left Icon slider.
monthTextStyle	TextStyle	-	Custom styling for Month Name.
dateStyle	TextStyle	-	Custom styling for date.
dayStyle	TextStyle	-	Custom styling for day.
activeDateColor	String	-	Background color for active date.
dateContainerStyle	ViewStyle	-	Custom styling for date tabs.
dayFormat	string	ddd	Custom day format for days
CustomMonthComponent	JSX.Element	Default Month View	Custom Month Container

:art: Demo

You can try the example app by cloning this repo and running the following commands:

cd example
yarn install
npx expo start

:handshake: Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you find a bug or have a feature request. See the contributing guide to learn how to contribute to the repository and the development workflow.