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;

where is typography ?

where is typography ?

you can to replace typography by <Text>

this code is shown slow
some warning VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 36360, "dt": 6288, "prevDt": 35844}

please give me some solutions..
thanks you Sir

did not work bro

TypeError: Cannot assign to read only property 'exports' of object '#'

module.export
node_modules/react-native-calendars/src/dateutils.js:144

144 | module.exports = {
145 | weekDayNames,
146 | sameMonth,
147 | sameWeek,

did not work bro

TypeError: Cannot assign to read only property 'exports' of object '#'

module.export
node_modules/react-native-calendars/src/dateutils.js:144

144 | module.exports = {
145 | weekDayNames,
146 | sameMonth,
147 | sameWeek,

That error occurs because it's not supported on the web. Try it in an IOS or Android device :)

why not showing up?

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

do you have a new version ?

this code is shown slow some warning VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 36360, "dt": 6288, "prevDt": 35844}

please give me some solutions.. thanks you Sir

if you look at the items being rendered, he is rendering all of the items. its running slow because he has done a good job showing all the options, it is up to you to make a better (more suited to your needs) render method.

why not showing up?

we need more information bub. I would guess to check the render method is correct. if your using react native and not typescript you will have to change some syntax.

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