How to use Agenda Calendar in React Native?

Hi Guys,

In this tutorial, we will explore how to implement an agenda calendar in React Native. If you're looking for an Agenda calendar example in React Native, this guide will help you integrate the agenda calendar component into your React Native application step by step. Let’s break it down and walk through the process of adding and using an agenda calendar in your project!

We’ll use the react-native-calendars library to create the agenda calendar view, and react-native-paper for styling and UI components. Follow the steps below to get started!

First, let's create a new project using Expo. Run the following command in your terminal:

expo init ExampleApp

Now, we need to install the necessary libraries for the agenda calendar. Use the following commands to install:

npm install --save react-native-calendars

Next, install react-native-paper for UI components:

npm install react-native-paper

Now, open the App.js file and add the following code:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, StatusBar } from 'react-native';
import { Agenda } from 'react-native-calendars';
import { Card } from 'react-native-paper';

const timeToString = (time) => {
    const date = new Date(time);
    return date.toISOString().split('T')[0];
}

const App = () => {
    const [items, setItems] = React.useState({});

    const loadItems = (day) => {

        setTimeout(() => {
            for (let i = -15; i < 85; i++) {
                const time = day.timestamp + i * 24 * 60 * 60 * 1000;
                const strTime = timeToString(time);

                if (!items[strTime]) {
                    items[strTime] = [];

                    const numItems = Math.floor(Math.random() * 3 + 1);
                    for (let j = 0; j < numItems; j++) {
                        items[strTime].push({
                            name: 'Item for ' + strTime + ' #' + j,
                            height: Math.max(10, Math.floor(Math.random() * 150)),
                            day: strTime
                        });
                    }
                }
            }
            const newItems = {};
            Object.keys(items).forEach(key => {
                newItems[key] = items[key];
            });
            setItems(newItems);
        }, 1000);
    }

    const renderItem = (item) => {
        return (
            <TouchableOpacity style={styles.item}>
                <Card>
                    <Card.Content>
                        <View>
                            <Text>{item.name}</Text>
                        </View>
                    </Card.Content>
                </Card>
            </TouchableOpacity>
        );
    }

    return (
        <View style={styles.container}>
            <Agenda
                items={items}
                loadItemsForMonth={loadItems}
                selected={'2022-07-07'}
                refreshControl={null}
                showClosingKnob={true}
                refreshing={false}
                renderItem={renderItem}
            />
            <StatusBar />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        flex: 1,
        borderRadius: 5,
        padding: 10,
        marginRight: 10,
        marginTop: 17
    },
});

export default App;

Finally, run your project using the following command:

expo start

Scan the QR code using the Expo Go application on your mobile device to see the agenda calendar in action!

This simple example demonstrates how you can use the Agenda Calendar in React Native to display events, schedule tasks, or manage appointments. With the react-native-calendars library, you can customize it further to meet your application's specific needs.

I hope this helps you integrate an agenda calendar in React Native!

Happy Coding with React Native!