How to render expo-calendars Calendar?

98 views Asked by At

i'm using expo-calendars to create a dinamic calendar but i can't render on display the calendar.

I'm using this library in this way

import AsyncStorage from "@react-native-async-storage/async-storage"
import { useEffect, useState } from "react"
import { Pressable, StyleSheet, View } from "react-native"
import * as Calendario from 'expo-calendar';
import { Calendar } from "expo-calendar";

export const Diary = () => {
    const restStorage = async () => {
        await AsyncStorage.clear()
    }
    
     
    const [events, setEvents] = useState([]);

    useEffect(() => {
      // Funzione asincrona per recuperare gli eventi del calendario
      const fetchEvents = async () => {
        // Ottieni l'autorizzazione per accedere al calendario
        const { status } = await Calendario.requestCalendarPermissionsAsync();
        const defaultCalendarSource = {
            id: 1,
            isLocalAccount: true, 




            name: 'Expo Calendar' 
        }
        if (status === 'granted') {
          // Ottieni gli ID dei calendari disponibili
          await Calendario.createCalendarAsync({
            title: 'Expo Calendar',
            color: 'blue',
            entityType: Calendario.EntityTypes.EVENT,
            sourceId: defaultCalendarSource.id,
            source: defaultCalendarSource,
            name: 'internalCalendarName',
            ownerAccount: 'personal',
            accessLevel: Calendario.CalendarAccessLevel.OWNER,
          })
          const calendars = await Calendario.getCalendarsAsync();
          // Crea un elenco di eventi dal calendario
          const eventList = [];
          for (const calendar of calendars) {            
            eventList.push(calendar);
          }
          setEvents(eventList);
        }
      };
      fetchEvents();
    }, []);

    console.log(events)
    return (
        <View style={styles.container}>
           <Calendar events={events}/>
        </View> 
        
    )
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: 'violet'
    },
    calendar: {
        width: 350,
        height: 300,
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 5,
        shadowColor: 'gray',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        elevation: 5,
    }
    
})

i got calendar but i cant to see it on display and i got this error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Can someone help me with this issue?

0

There are 0 answers