React Native Full Calendars (RNFC)

React Native Full Calendar (RNFC) is an intuitive and powerful calendar component library designed for React Native.

🚀 Features

• Full Monthly Calendar: Displays events on a monthly basis.
• Event Styling: Add multiple events per day with colors and styles.
• Multi-Day Events: Visualize events that span across multiple days (e.g., team meetings, vacations).
• Smooth Scrolling: Scroll seamlessly between months.

📖 Documentation

Check out the documentation website.

🔌 Installation

$ npm install react-native-full-calendars

OR

$ yarn add react-native-full-calendars

Dependencies

yarn add react-native-reanimated react-native-gesture-handler

Follow installation instructions for react-native-reanimated and react-native-gesture-handler

Basic Usage

import React, { useCallback, useState } from 'react';
import { Dimensions, SafeAreaView } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import Calendar from 'react-native-full-calendars';
import { mockData } from './test';

function App(): React.JSX.Element {
    const [selectedDate, setSelectedDate] = useState<Date>(new Date());

    const handlePress = useCallback((date: Date) => {
        setSelectedDate(date);
    }, []);

    return (
        <GestureHandlerRootView>
            <SafeAreaView style={{ flex: 1 }}>
                <Calendar
                    selectedDate={selectedDate}
                    onPageChange={(date) => {
                        console.log(date);
                    }}
                    data={mockData}
                    onDatePress={handlePress}
                    width={Dimensions.get('window').width - 20}
                />
            </SafeAreaView>
        </GestureHandlerRootView>
    );
}

export default App;

Properties

| Property | Type | Default value | Description | | --------------------- | -------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | data | CalendarData[] | | The data displayed in the calendar, including events | | ref? | Ref<CalendarController> | null | A reference to the CalendarController instance, allowing external control or state inspection of the calendar. | | selectedDate? | Date | | The currently selected date in the calendar. | | currentDate? | Date | new Date() | The date considered as the current day in the calendar. | | onDatePress? | (Date, DateOptions) => void | | Callback triggered when a date is pressed. | | onPageChange? | (Date) => void | | Callback triggered when the calendar page changes. | | buffer? | number | 1 | Number of additional pages to load before and after the current page. If buffer is 2, the calendar loads 2 pages before and 2 pages after the current page. | | maxDate? | Date | | The latest date the user can navigate to in the calendar. | | minDate? | Date | | The earliest date the user can navigate to in the calendar. | | maxVisibleCount? | number | 4 | The maximum number of items visible within a single date component. | | height? | number | | The height of the calendar component. | | width? | number | | The width of the calendar component. | | theme? | Theme | | Theme settings for customizing the calendar's appearance. | | weekStartDay? | WeekDayIndex | 0 (Sunday) | The first day of the week. | | renderDate? | RenderDate | | Function to render the content of a single day in the calendar. | | renderDayLabel? | RenderDayLabel | | Function to render the labels for days in the calendar (e.g., Mon, Tue). | | renderHeader? | RenderHeader | | Function to render the header of the calendar. | | renderMoreItemText? | RenderMoreItemText | | Function to render text indicating the number of additional items beyond the visible count. |

📄 License

MIT