Google Calendar Data get and show it by full-Calendar package in React Web application
Published: 2021-08-07 07:06:18

Most useful things is for making appointment type of we application we need to give one appointment date and maybe sometimes we need to create event from website to google calendar but main things this integration sometime hard 
here is the solution how can you get event data from google calendar and show it to your web application or react application 

What you need to integrate google calendar to your web application 
- Go to to google developer site 
and collect API_KEY and CLIENT_ID in your Google Console to use in Google Calendar APIs.

var gapi = window.gapi;

 var CLIENT_ID = ""
 var API_KEY = ""
 var DISCOVERY_DOCS = 
 ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]  var SCOPES = "https://www.googleapis.com/auth/calendar.events"

make one component and store those things to your component 

and paste those things 
const handleClick = () => {
    console.log('Work')

    gapi.load('client:auth2', () => {
      console.log('loaded client')

      gapi.client.init({
        apiKey: API_KEY,
        clientId: CLIENT_ID,
        discoveryDocs: DISCOVERY_DOCS,
        scope: SCOPES,
      })

      gapi.client.load('calendar', 'v3', () => console.log('bam You login to the Google Calender!'))

      gapi.auth2.getAuthInstance().signIn()
        .then(() => {

          var event = {
            'summary': 'Awesome Event!',
            'location': '800 Howard St., San Francisco, CA 94103',
            'description': 'Really great refreshments',
            'start': {
              'dateTime': '2021-08-17T09:00:00-07:00',
              'timeZone': 'America/Los_Angeles'
            },
            'end': {
              'dateTime': '2022-06-28T17:00:00-07:00',
              'timeZone': 'America/Los_Angeles'
            },
            'recurrence': [
              'RRULE:FREQ=DAILY;COUNT=2'
            ],
            'attendees': [
              { 'email': 'lpage@example.com' },
              { 'email': 'sbrin@example.com' }
            ],
            'reminders': {
              'useDefault': false,
              'overrides': [
                { 'method': 'email', 'minutes': 24 * 60 },
                { 'method': 'popup', 'minutes': 10 }
              ]
            }
          }

          var request = gapi.client.calendar.events.insert({
            'calendarId': 'primary',
            'resource': event,
          })

          request.execute(event => {
            console.log(event)
            window.open(event.htmlLink)
          })


        })
    })
  }

and after make those function go-to the
div section and paste it anywhere you want to show the button 

<button style={{ width: 100, height: 50 }} onClick={handleClick}>Add Event</button>

after getting add event you have to watch how many event you have in your google calendar 

make one button in your component 

<button style={{ width: 100, height: 50 }} onClick={getEvent}>Get Event</button>

and make one function 

const [appointment, setAppointments] = useState([]);

const getEvent = () => {
    /*
        Uncomment the following block to get events
    */
    console.log('events get')
    // get events
    try {
      gapi.client.calendar.events.list({
        'calendarId': 'primary',
        'timeMin': (new Date()).toISOString(),
        'showDeleted': false,
        'singleEvents': true,
        'maxResults': 10,
        'orderBy': 'startTime'
      }).then(response => {
        const events = response.result.items
        console.log('EVENTS: ', events)
        setAppointments(events);
      })
    }
    catch {
      console.log('error');
    }
  }
}

after then install one package name is fullCanlendar and show 

      <FullCalendar
            plugins={[dayGridPlugin]}
            initialView="dayGridMonth"
            events={[{title: 'Appointment One', date: '2021-08-19'}]}
          />

Google Calendar Doc : https://developers.google.com/calendar/api/quickstart/js
Related blog : https://dev.to/nouran96/google-calendar-events-with-react-544g