React-native-schedule-slot NPM

react-native-schedule-slot

This package is designed to manage daily booking slots for each month with easy-to-use props and components. It doesn't require any third-party libraries or native configuration. Additionally, it displays booked slots on the calendar grid in different colors and offers fully customizable UI options.

Installation

npm install react-native-schedule-slot

Features ✨

No Native code required
Easy to use
Dynamic colors for booked slot | available slot | not available slot
example and screenshot added for Android | iOS | web
Auto scroll to current date (Customizable)
Footer information based on colors props
Supports both react-native-cli and expo.

Usage

Importing the `RNBooking` component

import RNBooking from 'react-native-schedule-slot'

const bookingData = {slots: [
    '11:00 AM',
    '12:00 PM',
    '1:00 PM',
    '2:00 PM',
    '3:00 PM',
    '4:00 PM',
    '5:00 PM',
    '6:00 PM',
    '7:00 PM',
    '8:00 PM',
    '9:00 PM',
    '10:00 PM',
  ],
  availableSlots: [
    {
      date: '1722710400000',
      slots: ['11:00 AM', '1:00 PM', '4:00 PM', '7:00 PM', '9:00 PM'],
    }],
    bookedSlots: []
  }

<RNBooking bookingData={bookingData} />