How to add event calendar in React Native

Adding an event calendar in a React Native app involves using third-party libraries, as React Native does not have a built-in calendar component. Here are the general steps you can follow:

 

1. Choose a Calendar Library:

There are several libraries available for React Native that offer calendar components. Some popular options are:

 

react-native-calendars: A versatile library that provides various calendar views and customization options.

We will use Agenda component of this library to show event on calendar.

2. Install the Chosen Library:

Use npm or yarn to install the library in your React Native project.

 

For example, if you choose react-native-calendars, install it by running:

 

npm install react-native-calendars

 

3. Integrate and Use the Agenda Component:

Once installed, you can import the agenda component into your React Native screens and use it as per the library’s documentation.

 

 

4. Customize and Handle Events:

You can customize the calendar appearance, handle different events (like selecting a day, etc.), and integrate it with your app’s logic based on the library’s documentation.

<Agenda

                    ref={(ref) => agendaRef = ref}

                    // marked date Object

                    markedDates={markedData}

                    markingType={'custom'}

                    selected={selectedDay}

                    // Calendar Event Data array of objects

                    items={calendarData}

                    renderItem={(item, isFirst) => {

                        return (

                            <TouchableOpacity key={random(2)} style={[styles.item, { backgroundColor: item?.color ? item?.color : "#62D0B5" }]}>

                                <Text style={styles.itemText}>Title: {item?.name}</Text>

                                {item?.description &&

                                    <Text style={styles.itemText}>Description: {item?.description}</Text>

                                }

                                

                            </TouchableOpacity>

                        )

                    }}

                    renderEmptyData={() => {

                        if(isLoading){

                            return(<View/>);

                        }

                        else{

                            return (

                                <View style={{ flex: 1, alignContent: "center", marginTop: 50 }}>

                                    <Text style={{ textAlign: "center" }}>No Event Found!</Text>

                                </View>

                            )

                        } 

                    }}

                    onDayPress={(day) => {

                        // Event here

                    }}

                    renderKnob={() => {

                        return (<TouchableOpacity><Icon name={"caretdown"} color={"#62D0B5"} size={18} /></TouchableOpacity>);

                    }}

                    hideExtraDays={true}

                    scrollEnabled={true}

                    horizontal={horizontal}

                    theme={{

                        heading: { height: 500 }

                    }}

                />

 

 5. Permissions (if required):

If your chosen library interacts with device calendar events, ensure you request necessary permissions (if any) using React Native’s PermissionsAndroid or other appropriate methods.

 

Remember to refer to the documentation of the chosen library for detailed usage and customization options.