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;

How can I update calendar year, Because here only show until in 2021.

line 64 shows selected for the selected date if you delete this line it will default to the current date.

do you have a new version ?

i just checked as of November 2022 this is still up to date. so a new version isnt needed. any questions you have about tailoring to your needs should be answered by react-native-calendar github page

Hi, i can't scroll to the top when the first rendering the selectedDay agenda even though i have items -15 days and +15 days.

        <View style={styles.container}>
            <Agenda
                items={items}
                selectedDay={new XDate()}
                loadItemsForMonth={loadItems}
                renderItem={renderItem}
                renderEmptyDate={renderEmptyDate}
                firstDay={1}
            />
        </View>
    ```

`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