react-native-picker-calendar-view v1.0.0

react-native-picker-calendar-view 📅 ✨

This is a highly customizable package 🔥 that can be used as a simple date picker as well as a calendar view 📅 for React Native. It is compatible with both Android and iOS platforms ✨

Features available :

• Supports custom day view in calendar.
• Supports custom week view in calendar.
• Supports complete custom header view in calendar.
• Flexible component can be used within any view like bottom sheet etc.
• Can be used as a simple date picker view for any usecases.
• Supports restricting user to select betwwen minimum date & maximum date only for validation.
• *Allows to change arrow images for left and right navigation.

Spread Your ❤️:

If you like the work then don't forget to hit that ⭐ button to show some appreciation & love
for this project as your token of love does wonders.

Installation

If using yarn:

yarn add react-native-picker-calendar-view

If using npm:

npm i react-native-picker-calendar-view

Screenshots : IOS

Custom day view	Custom week view	Custom header view

Screenshots : ANDROID

Custom day view	Custom week view	Custom header view

Usage

For example code, Click here

Basic Props

{

	/** Unique testid for the component */
	testId?: string;

	/** Parent style for the entire component. */
	style?: StyleProp<ImageStyle>;

	/** Display grid like view around each day, DEFAULT = true */
	isShowGrid?: boolean;

	/** Hide previous month & next month's extra days, DEFAULT = false */
	hideExtraDays?: boolean;

	/** Hide month & year navigation arrows, DEFAULT = false */
	hideArrows?: boolean;

	/** Callback which get invloked when a date is clicked, The function receives day, month & year as parameter  */
	onDayPress?: (props: { day: number; month: number; year: number }) => void;

	/** Replace default month and year title with custom one. The function receive a month ,year & other header props as parameter */
	renderHeader?: (props: {
		month: number;
		monthName: string;
		year: number;
		toggleMList: () => void;
		toggleYList: () => void;
		prevMonth: () => void;
		nextMonth: () => void;
	}) => JSX.Element;

	/** Render custom day component. the function receive all day props */
	renderDay?: (props: {
		testId?: string;
		index: number;
		day: DayProps;
		month: number;
		year: number;
		onDayPress?: (props: {
			day: number;
			month: number;
			year: number;
		}) => void
	}) => JSX.Element;

	/** Render custom week component. the function receive a all week props */
	renderWeekName?: (props: {
		testId?: string;
		value: {
			d: string; // eg. { d: "1", dd: "01", ddh: "Su", ddd: "Sun", dddd: "Sunday" },
			dd: string;
			ddd: string;
			dddd: string;
			ddh: string;
		};
	}) => JSX.Element;

	/** Replace left arrows with custom ones */
	renderLeftArrow?: () => JSX.Element;

	/** Replace right arrows with custom ones */
	renderRightArrow?: () => JSX.Element;

	/** Handler which gets executed when press arrow icon left. It receive a callback can go back month */
	onPressArrowLeft?: (props: {
		prevMonth?: () => void;
		month?: number;
		nextMonth?: () => void;
	}) => void;

	/** Handler which gets executed when press arrow icon right. It receive a callback can go next month */
	onPressArrowRight?: (props: {
		prevMonth?: () => void;
		month?: number;
		nextMonth?: () => void;
	}) => void;

	/** Disable left arrow */
	disableArrowLeft?: boolean;

	/** Disable right arrow */
	disableArrowRight?: boolean;

	/** Minimum date that can be selected, dates before minDate will be grayed out. Format = "DD-MM-YYYY" */
	minDate?: string;

	/** Maximum date that can be selected, dates after maxDate will be grayed out. Format = "DD-MM-YYYY" */
	maxDate?: string;
}

Documentation :

CalendarDateView

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

About Me

Yuvraj Pandey

I am a passionate Engineer which likes to push himself on various fronts of technologies.

For more exciting updates follow me,