Calendar Agenda

calendar.tsx

import React, {useState} from 'react';
import {View, TouchableOpacity} from 'react-native';
import {Agenda} from 'react-native-calendars';
import {Card, Avatar} from 'react-native-paper';
import Typography from '../components/Typography';

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

const Schedule: React.FC = () => {
  const [items, setItems] = 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(50, Math.floor(Math.random() * 150)),
            });
          }
        }
      }
      const newItems = {};
      Object.keys(items).forEach((key) => {
        newItems[key] = items[key];
      });
      setItems(newItems);
    }, 1000);
  };

  const renderItem = (item) => {
    return (
      <TouchableOpacity style={{marginRight: 10, marginTop: 17}}>
        <Card>
          <Card.Content>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}>
              <Typography>{item.name}</Typography>
              <Avatar.Text label="J" />
            </View>
          </Card.Content>
        </Card>
      </TouchableOpacity>
    );
  };

  return (
    <View style={{flex: 1}}>
      <Agenda
        items={items}
        loadItemsForMonth={loadItems}
        selected={'2017-05-16'}
        renderItem={renderItem}
      />
    </View>
  );
};

export default Schedule;

`import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Agenda } from 'react-native-calendars';
import { Card, Avatar } from 'react-native-paper';

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

const Schedule = () => {
const [items, setItems] = useState({});

useEffect(() => {
    const today = timeToString(Date.now());
    const newItems = { [today]: [{ name: 'Testing calendars', height: 50 }] };
    setItems(newItems);
}, []);

const loadItems = (day) => {
    const today = timeToString(Date.now());
    const newItems = { [today]: [{ name: 'Testing calendars', height: 50 }] };
    setItems(newItems);
};

const renderItem = (item) => {
    return (
        <TouchableOpacity style={{ marginRight: 10, marginTop: 17 }}>
            <Card>
                <Card.Content>
                    <View
                        style={{
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            alignItems: 'center',
                        }}>
                        <Text>{item.name}</Text>
                        <Avatar.Text label="J" />
                    </View>
                </Card.Content>
            </Card>
        </TouchableOpacity>
    );
};

return (
    <View style={{ flex: 1 }}>
        <Agenda
            items={items}
            loadItemsForMonth={loadItems}
            selected={timeToString(Date.now())}
            renderItem={renderItem}
            theme={{
                todayTextColor: 'red',
                selectedDayBackgroundColor: 'lightblue',
                dotColor: 'blue',
            }}
        />
    </View>
);

};

export default Schedule;`

I hope this helps