How to Use React Native Calendar

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Calendar, CalendarList } from 'react-native-calendars';
import dateFns from 'date-fns';

const format = (date = new Date()) => dateFns.format(date, 'YYYY-MM-DD');
const getMarkedDates = (baseDate, appointments) => {
  const markedDates = {};

  markedDates[format(baseDate)] = { selected: true };

  appointments.forEach((appointment) => {
    const formattedDate = format(new Date(appointment.date));
    markedDates[formattedDate] = {
      ...markedDates[formattedDate],
      marked: true,
    };
  });

  return markedDates;
};

export default () => {
  const baseDate = new Date(2019, 6, 15);
  const APPOINTMENTS = [
    {
      date: '2019-07-13T05:00:00.000Z',
      title: "It's a past thing!",
    },
    {
      date: '2019-07-15T05:00:00.000Z',
      title: "It's a today thing!",
    },
    {
      date: '2019-07-18T05:00:00.000Z',
      title: "It's a future thing!",
    },
  ];

  return (
    <View style={styles.container}>
      <Calendar
        current={format(baseDate)}
        minDate={dateFns.subWeeks(baseDate, 1)}
        maxDate={dateFns.addWeeks(baseDate, 1)}
        onDayPress={(day) => {
          console.log('selected day', day);
        }}
        markedDates={getMarkedDates(baseDate, APPOINTMENTS)}
        theme={{
          calendarBackground: '#166088',

          selectedDayBackgroundColor: '#C0D6DF',
          selectedDayTextColor: '#166088',
          selectedDotColor: '#166088',

          dayTextColor: '#DBE9EE',
          textDisabledColor: '#729DAF',
          dotColor: '#DBE9EE',

          monthTextColor: '#DBE9EE',
          textMonthFontWeight: 'bold',

          arrowColor: '#DBE9EE',
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#166088',
    justifyContent: 'center',
  },
});