React-native-calendarview-datepicker

📦 Installation

npm i react-native-calendarview-datepicker

or

yarn add react-native-calendarview-datepicker

📺 Preview

🚀 Basic Usage

Default

You can simply add date-picker as follows. It shows minimal default calendar. But you can customize as you wish.

import DatePickerCalendar from 'react-native-calendarview-datepicker';
import Moment from 'moment';

...

const App = () => {
  const [date, setDate] = useState(moment());

  return (
        <DatePickerCalendar date={date} onChange={(selectedDate) => setDate(selectedDate)}/>
  );
};

Customized

You can have full control of calendar picker. Pass your own calendar header and condition styles for darkmode.

import DatePickerCalendar from 'react-native-calendarview-datepicker';
import Moment from 'moment';

...

const App = () => {
  const [date, setDate] = useState(moment());
  
  //Custom datepicker header
const customHeader = (date, month, year, setMonth, setYear) => {
    return (
        <View style={{flexDirection: "row", justifyContent: 'space-between'}}>
            <View>
                <View>
                    <Text style={{color: "#fff", fontSize: 18, opacity: 0.5, marginBottom: 4}}>{year}</Text>
                </View>
                <View>
                    <Text style={{
                        color: "#fff",
                        fontSize: 25,
                        fontWeight: 'bold'
                    }}>{moment(date).format("MMMM Do YYYY")}</Text>
                </View>
            </View>
            <View style={{flexDirection: "row", alignItems: 'center'}}>
                <TouchableOpacity style={{
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginRight: 10,
                    height: 40,
                    width: 40,
                    backgroundColor: "#155B3C",
                    borderRadius: 100
                }} onPress={() => setMonth(month - 1)}>
                    <Text style={{color: "#18D183", fontSize: 30, marginBottom: 5}}>{'‹'}</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{
                    alignItems: 'center',
                    justifyContent: 'center',
                    height: 40,
                    width: 40,
                    backgroundColor: "#155B3C",
                    borderRadius: 100
                }} onPress={() => setMonth(month + 1)}>
                    <Text style={{color: "#18D183", fontSize: 30, marginBottom: 5}}>{'›'}</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

  return (
        <DatePickerCalendar
            date={date}
            onChange={(selectedDate) => setDate(selectedDate)}
            placeholder="Select date"
            placeholderStyles={{color: "#04e37d"}}
            fieldButtonStylesDateFormat="MMM Do YY"
            fieldButtonStyles={{width: '95%', backgroundColor: "#1D323E", borderRadius: 12, borderWidth: 2, borderColor: "#18D183", paddingLeft: 20}}
            fieldButtonTextStyles={{color: "#18D183"}}
            modalBackgroundColor={"#1D323E"}
            weekHeaderTextColor={"#18D183"}
            datesColor={"#fff"}
            selectedDateColor={"#1D323E"}
            selectedDateHighlightColor={"#18D183"}
            selectedDateHighlightRadius={5}
            customHeader={(date, month, year, setMonth, setYear) => customHeader(date, month, year, setMonth, setYear)}
            headerStyles={{padding: 0}}
        />
  );
};

📑 API Reference

| Props| Type | Description | -------- | ------- | -------- | | date | Moment | If your need to show placeholder on initial load just pass undefined, else for default value pass moment() object | onChange |Function| Callback triggered on date select (Required) | placeholder | String | Custom placeholder text | placeholderStyles | Object | Placeholder text styles | modalBackgroundColor | String | Calendar modal background color | headerStyles | Object | Header wrapper styles | customHeader | Function | Function should return a component. Args: (date, month, year, setMonth, setYear) | weekHeaderTextColor | String | Week days names text color | selectedDateHighlightColor | String | Selected date highlight marker color | selectedDateHighlightRadius | Number | Selected date highlight marker radius | datesColor | String | Calendar date color | selectedDateColor| String | Selected calendar date color | fieldButtonStylesDateFormat | String | Selected date showing format. Available formats | fieldButtonStyles | Object | Field button styles | fieldButtonTextStyles | Object | Field button text styles

🗞 License

React-native-calendarview-datepicker is licensed under the MIT License