react-nativecalendarbackground-colorandroid-calendarreact-native-calendars

How to color background in react-native-CalendarPicker with custom Dates


import moment from 'moment';
import CalendarPicker from 'react-native-calendar-picker';

const ChechAvailability = () => {

    const [date, setDate] = useState([]);
    const [userDate, setUserDate] = useState('');

    const navigation = useNavigation();

    axios.post("http://192.168.0.19:3000/booked_dates").then((resp) => {
          setDate(resp.data)
        });

    useEffect(() => {
        setDate(date);
    }, [date]);

    // console.log(date);

    const listItems = date.map((items) => moment(items.booking_date).format('YYYY-MM-DD'));
    // console.log(listItems);


    let today = moment();
    let day = today.clone().startOf('month');
    let customDatesStyles = [];

Solution

  • Scrollable CalendarPicker — New in 7.x The scrollable prop was introduced in 7.0.0 and features a bi-directional infinite scroller. It recycles months using RecyclerListView, shifting them as the ends are reached. If the Chrome debugger is used during development, month shifting may be erratic due to a RN setTimeout bug. To prevent month shifts at the ends of the scroller, set restrictMonthNavigation, minDate, and maxDate range to 5 years or less.

    strong text