react-native-ll-calendar

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

Installation

npm install react-native-ll-calendar

or

yarn add react-native-ll-calendar

Usage

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<MonthCalendarRef>(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 (
    <View style={{ flex: 1 }}>
      <View style={{ flexDirection: 'row', justifyContent: 'space-around', padding: 10 }}>
        <Button title="Scroll Top" onPress={handleScrollToTop} />
        <Button title="Check Height" onPress={checkRowHeight} />
      </View>
      <MonthCalendar
        ref={calendarRef}
        defaultDate={date}
        weekStartsOn={1}
        onChangeDate={(newDate) => setDate(newDate)}
        events={events}
        onPressEvent={(event) => console.log('Event pressed:', event.title)}
        // ... other props
      />
    </View>
  );
}

API

MonthCalendar Props

| 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 |

MonthCalendarRef Methods

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. |

CalendarEvent

| 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