version: 1.1.9

@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).
• Marked Dates: Highlight specific dates with custom colors provided via the markedDates prop.
• Responsive design: Automatically adjusts day container sizes based on screen width and arrow button visibility.
• Highlighted Date: Option to specify a highlighted date that the calendar scrolls to by default.

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 = () => {
  const markedDates = [
    { date: '2024-10-02', bgColor: 'red', color: '#FEDEBA' },
    { date: '2024-10-15', bgColor: 'red', color: '#DF7689' },
  ];

  const handleDateSelect = (date) => {
    console.log("Selected date:", date.format("YYYY-MM-DD"));
  };

  const renderCustomDateBox = ({ date }) => (
    <View>
      <Text>{date.format('MMMM Do YYYY')}</Text>
    </View>
  );

  return (
    <Calendar
      showArrowIcons={true}
      showDateBox={true}
      markedDates={markedDates}
      highlightedDate="2024-10-15"
      onDateSelect={handleDateSelect}
      renderDateBox={renderCustomDateBox}
      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. | | markedDates | Array<{ date: string, color: string }> | [] | Highlight specific dates with custom colors (YYYY-MM-DD). | | highlightedDate | string | null | Specify a date (YYYY-MM-DD) to be highlighted and scrolled to on load. | | onDateSelect | function | null | Callback triggered when a date is selected, returning the selected date as a Moment object. | | renderDateBox | function | null | Custom function to render the selected date box content. Receives { date: Moment } as props. |

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.
• todayContainer: Style for the container of today's date.
• headerContainer: Style for the header container showing the month.
• headerMonthName: Style for the displayed month name.

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' },
  }}
/>

Marked Dates

The markedDates prop allows you to highlight specific dates with custom colors. Pass an array of objects with the following structure:

const markedDates = [
  { date: '2024-10-02', bgColor: 'red', color: '#FEDEBA' },
  { date: '2024-10-15', bgColor: 'red', color: '#DF7689' },
];

Example

<Calendar
  markedDates={markedDates}
/>

In this example, the specified dates will be highlighted with the corresponding colors.

License

MIT License. See LICENSE for more details.

Author

Amit Saha