React Native Appointment Calendar

This module is customizable react native appointment component. Main purpose of this module is taking appointment information from user.

Demo

Installation

With Yarn

yarn add @ecancan/react-native-appointment-calendar

With Npm

npm install @ecancan/react-native-appointment-calendar

This module just made with javascript. There isn't have any native module in this module. So no need any linking or pod installing.

Usage

Basic

import {RNAppointmentCalendar} from 'react-native-appointment-calendar';

<RNAppointmentCalendar
  date={'2022-08-15 12:30'}
  onDateSelect={(date) => console.log('date', date)}
  onTimeSelect={(time) => console.log('time', time)}
  onDateTimeSelect={(dateTime) => console.log('dateTime', dateTime)}
/>

All props are optional. Actually no need any props for basic usage. By default, the Module will display based on the current date.

Advanced

import {RNAppointmentCalendar} from 'react-native-appointment-calendar';

<RNAppointmentCalendar
  date={'2022-08-15 12:30'}
  format={'YYYY-DD-MM HH:mm'}
  withTimes={true}
  monthRange={2}
  includeTimes={includeTimes}
  bookedTimes={bookedTimes}
  selectedTimes={selectedTimes}
  disabledDates={disabledDates}
  isMultipleTimeSelect={true}
  unSelectedTimeComponent={
    (
      <View>
        <Text>Not have any selected date.</Text>
      </View>
    )
  }
  onDateSelect={(date) => console.log('date', date)}
  onTimeSelect={(time) => console.log('time', time)}
  onDateTimeSelect={(dateTime) => console.log('dateTime', dateTime)}
/>

Here have multiple defined variables like includeTimes, bookedTimes, selectedTimes, disabledDates. This variables have for different purpose. If you want to just selecting specific time use to this includeTime variable for filter Or you just want to display booked times on calendar? Just use bookedTimes. But bookedTimes have clickable property.

Structures of Defined Variables

const includeTimes = {
  '2022-08-13': ['12:30', '14:30'],
  '2022-08-14': ['12:30', '14:30'],
  '2022-08-15': ['12:30'],
  '2022-08-16': ['12:30'],
  '2022-08-17': ['12:30'],
  '2022-08-18': ['12:30'],
  '2022-08-19': ['12:30']
};

const bookedTimes = {
  '2022-08-13': ['12:30', '14:30'],
  '2022-08-14': ['12:30', '14:30'],
  '2022-08-15': ['12:30'],
  '2022-08-16': ['12:30'],
  '2022-08-17': ['12:30'],
  '2022-08-18': ['12:30'],
  '2022-08-19': ['12:30']
};

const selectedTimes = {
  '2022-08-13': ['12:30', '14:30'],
  '2022-08-14': ['12:30'],
  '2022-08-15': ['12:30'],
  '2022-08-16': ['12:30'],
  '2022-08-17': ['12:30'],
  '2022-08-18': ['12:30'],
  '2022-08-19': ['12:30']
};

const disabledDates = ['2022-08-13', '2022-08-15', '2022-08-16', '2022-08-17', '2022-08-18', '2022-08-19'];

Customize date card

import {RNAppointmentCalendar} from 'react-native-appointment-calendar';

const colors = {
  selectedBgColor: '#000',
  selectedColor: '#eaeaea',
  currentDateColor: '#328ae8',
  disableOpacity: 0.5
};
const dateCardPositions = [
  {
    key: 'dayOfWeek',
    isVisible: true,
    fontSize: 12
  },
  {
    key: 'day',
    isVisible: true,
    fontSize: 20
  },
  {
    key: 'month',
    isVisible: true,
    fontSize: 14
  }
];

<RNAppointmentCalendar
  date={'2022-08-15 12:30'}
  format={'YYYY-DD-MM HH:mm'}
  withTimes={true}
  monthRange={2}
  colors={colors}
  dateCardPositions={dateCardPositions}
  onDateSelect={(date) => console.log('date', date)}
  onTimeSelect={(time) => console.log('time', time)}
  onDateTimeSelect={(dateTime) => console.log('dateTime', dateTime)}
/>

All Props

| Prop Name | Necessity | Value Example | Value Type | |-----------|-----------|--------------------------------------------------------------------|------------| | date | optional | 2022-08-15 12:30 | string | | format | optional | YYYY-DD-MM HH:mm | string | | includeTimes | optional | Structure Of Defined Variables | object | | disabledDates | optional | Structure Of Defined Variables | array | | bookedTimes | optional | Structure Of Defined Variables | object | | selectedTimes | optional | Structure Of Defined Variables | object | | monthRange | optional | 2 | number | | timeInterval | optional | 30 | number | | withTimes | optional | false | boolean | | isMultipleTimeSelect | optional | false | boolean | | unSelectedTimeComponent | optional | Advanced | | | colors | optional | Customize date card | object | | dateCardPositions | optional | Customize date card | | | styleDateFlatList | optional | Regular react style prop | object | | styleTimeFlatList | optional | Regular react style prop | object | | onDateSelect | optional | Basic | function | | onTimeSelect | optional | Basic | function | | onDateTimeSelect | optional | Basic | function |

How do you contribute

Git Clone

git clone https://github.com/Ecancan/RNAppointmentCalendar.git

Install packages

With Yarn

yarn install
yarn run dev

With Npm

npm install
npm run dev

Install Example App (With Yarn)

cd example
yarn install

For IOS

yarn run pod
yarn run ios

For Android

yarn run android

Note

If you see any bug or issue please open a issue or send a contribution. Thank you for your time on this module. :)