version: 1.1.0

@borase-healthcare-limited/react-native-horizontal-calender

A customizable, horizontally scrollable calendar component for React Native. Perfect for applications requiring a sleek, minimal calendar design with the ability to select and display dates. Designed to be simple yet powerful, this component allows developers to easily integrate a horizontal calendar view into their apps.

Features

• Horizontally scrollable week view: Navigate between weeks with smooth transitions.
• Customizable appearance: Easily style day containers, selected dates, and other UI elements.
• Optional navigation controls: Show or hide left/right arrow buttons for week navigation.
• Selected Date Box: Display details of the selected date in a scrollable box (can be toggled on/off).
• Responsive design: Automatically adjusts day container sizes based on screen width and arrow button visibility.

Installation

You can install this package using npm or yarn:

npm install @borase-healthcare-limited/react-native-horizontal-calender

Or with yarn:

yarn add @borase-healthcare-limited/react-native-horizontal-calender

Usage

Here's an example of how to use the Calendar component in your React Native project:

import React from 'react';
import Calendar from '@borase-healthcare-limited/react-native-horizontal-calender';

const MyApp = () => {
  return (
    <Calendar
      showArrowIcons={true}
      showDateBox={true}
      customStyles={{
        dayContainer: { borderColor: '#ddd' },
        selectedDayContainer: { backgroundColor: '#4CAF50' },
        dayName: { fontSize: 12 },
        date: { fontSize: 14 },
      }}
    />
  );
};

export default MyApp;

Props

| Prop | Type | Default | Description | | ------------------ | ------------- | -------- | -------------------------------------------------------------------------------------------------------------------- | | showArrowIcons | boolean | true | Show or hide the left and right navigation icons. | | showDateBox | boolean | true | Toggle the visibility of the selected date info box. | | customStyles | object | {} | Customize the styles of various calendar components such as day containers, selected day background, and text fonts. | | LeftArrowIcon | component | null | Custom component for the left navigation arrow. | | RightArrowIcon | component | null | Custom component for the right navigation arrow. |

Custom Styles

You can pass custom styles to the calendar via the customStyles prop. Available style keys include:

• dayContainer: Style for each day container.
• selectedDayContainer: Style for the selected day.
• dayName: Style for the day name (e.g., Mon, Tue).
• date: Style for the date number.

Example of Customization

<Calendar
  showArrowIcons={false}
  customStyles={{
    dayContainer: { width: 50, height: 50 },
    selectedDayContainer: { backgroundColor: 'blue' },
    dayName: { fontSize: 14, color: 'black' },
    date: { fontSize: 16, color: 'black' },
  }}
/>

License

MIT License. See LICENSE for more details.