react-native-ll-calendar

A horizontally scrollable monthly calendar component for React Native with event support.

Installation

``sh
npm install react-native-ll-calendar
`

or

`sh
yarn add react-native-ll-calendar
`

Usage

`tsx
import { useState, useRef } from 'react';
import { View, Button } from 'react-native';
import dayjs from 'dayjs';
import { MonthCalendar, CalendarEvent, MonthCalendarRef } from 'react-native-ll-calendar';

const events: CalendarEvent[] = [
{
id: '1',
title: 'Meeting',
start: new Date(2025, 9, 5),
end: new Date(2025, 9, 5),
backgroundColor: '#ff6b6b',
borderColor: '#e55353',
color: '#0e0e0e',
},
// ... more events
];

function App() {
const [date, setDate] = useState(new Date());
const calendarRef = useRef(null);

const handleScrollToTop = () => {
// Scroll to the top of the current month view
calendarRef.current?.scrollMonthViewToOffset(
dayjs(date).format('YYYY-MM'),
0,
true
);
};

const checkRowHeight = () => {
// Get the height of the row containing the specific date
const height = calendarRef.current?.getMonthRowHeight(
dayjs(date).format('YYYY-MM'),
new Date()
);
console.log('Row height:', height);
};

return (





ref={calendarRef}
defaultDate={date}
weekStartsOn={1}
onChangeDate={(newDate) => setDate(newDate)}
events={events}
onPressEvent={(event) => console.log('Event pressed:', event.title)}
// ... other props
/>

);
}
`

API

$3

| Prop | Type | Required | Default | Description |
| --------------------------- | --------------------------------------- | -------- | ------- | ------------------------------------------ |
| defaultDate | Date | Yes | - | Initial date to display |
| weekStartsOn | 0 \| 1 | No | 0 | Week start day (0 = Sunday, 1 = Monday) |
| onChangeDate | (date: Date) => void | No | - | Callback when month changes |
| events | CalendarEvent[] | Yes | - | Array of calendar events |
| onPressEvent | (event: CalendarEvent) => void | No | - | Callback when event is pressed |
| onLongPressEvent | (event: CalendarEvent) => void | No | - | Callback when event is long pressed |
| delayLongPressEvent | number | No | - | Delay in ms before long press is triggered |
| onPressCell | (date: Date) => void | No | - | Callback when date cell is pressed |
| onLongPressCell | (date: Date) => void | No | - | Callback when date cell is long pressed |
| delayLongPressCell | number | No | - | Delay in ms before long press is triggered |
| onRefresh | () => void | No | - | Callback for pull-to-refresh |
| refreshing | boolean | No | - | Whether the calendar is refreshing |
| dayCellContainerStyle | (date: Date) => ViewStyle | No | - | Style function for day cell container |
| dayCellTextStyle | (date: Date) => TextStyle | No | - | Style function for day cell text |
| todayCellTextStyle | TextStyle | No | - | Style for today's cell text |
| locale | ILocale | No | - | Locale configuration for date formatting |
| weekdayCellContainerStyle | (weekDayNum: WeekdayNum) => ViewStyle | No | - | Style function for weekday cell container |
| weekdayCellTextStyle | (weekDayNum: WeekdayNum) => TextStyle | No | - | Style function for weekday cell text |
| hiddenMonth | boolean | No | false | Hide month header display |
| monthFormat | string | No | - | Custom format string for month display |
| stickyHeaderEnabled | boolean | No | false | Enable sticky headers for month and week |
| cellBorderColor | string | No | 'lightslategrey' | Color for calendar cell borders |
| allowFontScaling | boolean | No | - | Enable font scaling for text elements |
| eventHeight | number | No | 26 | Height of event items in pixels |
| eventTextStyle | (event: CalendarEvent) => TextStyle | No | - | Style function for event text |
| eventEllipsizeMode | 'head' \| 'middle' \| 'tail' \| 'clip' | No | 'tail' | Ellipsize mode for event text |
| bottomSpacing | number | No | - | Bottom spacing in pixels for scrollable content |

$3

You can access these methods by passing a ref to the MonthCalendar component.

| Method | Signature | Description |
| ------ | --------- | ----------- |
| scrollMonthViewToOffset | (monthKey: string, offset: number, animated?: boolean) => void | Scrolls the view of the specified month (format: 'YYYY-MM') to a vertical offset. |
| getMonthRowHeight | (monthKey: string, date: Date) => number \| undefined | Returns the height of the week row containing the specified date in the specified month. |

$3

| Property | Type | Required | Description |
| ----------------- | --------------------------------------- | -------- | ------------------------------ |
| id | string | Yes | Unique identifier |
| title | string | Yes | Event title |
| start | Date | Yes | Start date |
| end | Date | Yes | End date |
| backgroundColor | string | Yes | Background color |
| borderColor | string | Yes | Border color |
| color | string | Yes | Text color |
| borderStyle | 'solid' \| 'dashed' \| 'dotted' | No | Border style |
| borderWidth | number | No | Border width |
| borderRadius | number` | No | Border radius |

Features

- Horizontally scrollable month view
- Multi-day event support
- Customizable event colors and border styles
- Event press handlers (tap and long press)
- Date cell press handlers (tap and long press)
- Configurable week start day (Sunday or Monday)
- Customizable styling for day cells, weekday cells, and today's cell
- Pull-to-refresh support
- Locale support for internationalization
- Optional month header visibility control
- Custom month format display
- Sticky header support for month and week rows
- Customizable cell border colors
- Font scaling control for text elements
- Customizable event height and text styles
- Spans 10 years before and after the default date
- Programmatic scroll control via Ref
- Dynamic row height retrieval via Ref

License

MIT

---

Made with create-react-native-library