React-native-calendars: synchronize google calendar events in agenda

[uguryiilmz]

Hi everybody,

I am newbie to react native and trying to show events from my google calendar on the agenda. Is there an any sample code that shows how to do that because I am really stuck at this point. Here is what I have done so far, i was able to get the events as json from google calendar but I do not know how to display it in the calendar.

`import React from 'react';
import { SafeAreaView, View, Text, StatusBar, Image, AppRegistry, ScrollView, StyleSheet, TouchableHighlight, FlatList } from 'react-native';
import glamorous from "glamorous-native";
import { Calendar, Agenda } from 'react-native-calendars';
import { bColor, pColor } from "../style/colors"
import request from 'superagent'



export default class AppCalendar extends React.Component {
    static navigationOptions = ({ navigation }) => ({
        title: "Calendar",
    });

    constructor(props) {
        super(props)
        this.state= {
            events:null
        }

    }



    componentDidMount(){
        let postsUrl = "https://www.googleapis.com/calendar/v3/calendars/id/api-key
        fetch(postsUrl)
            .then((response) => response.json())
            .then((response) => {
                this.setState({
                    events: response
                })
            })
    }


    fetchData(){
            let e = []
            if(this.state.events != null) {
                for (let i = 0; i < this.state.events.length; i++) { 
                    let newEvent = {}
                    newEvent.title = this.state.events[i].summary
                    newEvent.location = this.state.events[i].location
                    newEvent.startDate = this.state.events[i].start.date || this.state.events[i].start.dateTime
                    newEvent.endDate = this.state.events[i].end.date || this.state.events[i].end.dateTime
                    e.push(newEvent) 
                }
                    return e[1]
            }
            else{
                return 'wrong'
            }

    }






    render() {
        return(
           <Container>
                <Agenda
                      items={this.state.events}
                      loadItemsForMonth={this.loadItems.bind(this)}
                      selected={'2017-05-16'}
                      renderItem={() => {return (<View />);}}
                      renderEmptyDate={() => {return (<View />);}}
                      rowHasChanged={() => {return r1.name !== r2.name;}}
                      onCalendarToggled={(calendarOpened) =>
                      }
                    />
           </Container>

        )
    }


    loadItems(day) {
        this.setState(
            {events :null}
        )
    }
}`

const Container = glamorous.safeAreaView({
    flex: 1,
})

[jeremyfrancis]

I needed the exact same thing. I accomplished this by using Zapier.com. It syncs my Google Calendar events with my Firebase (or any other service, options are endless). Then I load the data from Firebase into the Agenda Calendar.

[jeremyfrancis]

Also, if you do choose to go that route, it won't take the events already there, it will only add new events when they are created. I asked them about this and they gave me a good solution. You put all your Google Calendar events into a Google Sheets and have Zapier load that new data into Firebase or wherever. I used a simple script I found online and modified to paste all Google Calendar events into Sheets. If you want more info on that just let me know.

[trancanh2202]

Hi uguryiilmz,
Did you sovle your problem ?? I meet the same error. Can you show me the tip

[uguryiilmz]

Hey @trancanh2202

Yes, I actually solved it. The Agenda requires you to take the events in a specific format. Therefore, I had to adjust my events based on that. Then, it worked like a charm. Here is my code after I edited it,

PS: Don't forget to put your api key for your calendar

import React from 'react';
import { SafeAreaView, ActivityIndicator, View, ListView, Text, StatusBar, Image, AppRegistry, ScrollView, StyleSheet, TouchableHighlight, FlatList } from 'react-native';
import glamorous from "glamorous-native";
import {List, ListItem} from 'react-native-elements'
import { Calendar, Agenda } from 'react-native-calendars';
import { bColor, pColor } from "../style/colors"
import request from 'superagent'



export default class AppCalendar extends React.Component {
    static navigationOptions = ({ navigation }) => ({
        title: "Calendar",
    });



   constructor(props) {
        super(props)
        this.state= {
            clonedMovies:[],
            isLoading:true,
            events:[]
        }
    }



    componentDidMount(){
        let postsUrl = "https://www.googleapis.com/calendar/v3/calendars/[email protected]/events?key=API_KEY"
        fetch(postsUrl)
            .then((response) => response.json())
            .then((response) => {
                var standartDataSource=new ListView.DataSource({rowHasChanged: (r1, r2)=>r1!== r2});
                this.setState({
                    isLoading:false,
                    events:standartDataSource.cloneWithRows(response)
                })

            })
    } 




    handleEvents() {
        var confirmedEvents=0
        var cancelledEvents=0

        let e=[]
        if (this.state.events!= 0) {
            for (let i = 0; i < this.state.events._dataBlob.s1.items.length; i++) {
                    if(this.state.events._dataBlob.s1.items[i].status=="confirmed"){
                        let newEvent = {}
                        newEvent.title = this.state.events._dataBlob.s1.items[i].summary
                        newEvent.location = this.state.events._dataBlob.s1.items[i].location
                        newEvent.start=this.state.events._dataBlob.s1.items[i].start.date || this.state.events._dataBlob.s1.items[i].start.dateTime 
                        newEvent.end=this.state.events._dataBlob.s1.items[i].end.date || this.state.events._dataBlob.s1.items[i].end.dateTime 
                        e.push(newEvent)
                        confirmedEvents++;
                    }
                    else{
                        cancelledEvents++;    
                    }

            }
            return e
        }
        else {
            return []
        }
        console.log('Confirmed events are',confirmedEvents)
        console.log('Cancelled events are',cancelledEvents)
    }

    render() {
        console.log(this.state.events)
         if(this.state.events.length!= 0){
              // console.log(typeof this.state.events._dataBlob.s1.items[0].end.date );
              //console.log('type is',typeof(this.state.events._dataBlob.s1.items[102].start.date));
              console.log(this.handleEvents())

         }
                 return(
                        <List>
                            <FlatList
                                data={this.handleEvents()}
                                renderItem={({item})=>(
                                    <ListItem
                                        roundAvatar
                                        title={item.title}
                                        subtitle={item.location}
                                        avatar={{}}
                                    />


                                )}
                            />
                        </List>                  

                )

    }



}



const Container = glamorous.safeAreaView({
    flex: 1,
})

[mthuong]

@uguryiilmz
How can you get calendar id from Google Calendar API?

tks