google-calendar-react
Integration of Google Calendar API on your Custom Client side OR React component
Install
Using NPM
npm install --save google-calendar-react
Using Yarn
yarn add google-calendar-react
Use
import GoogleAPICalendar from 'google-calendar-react';
Typescript Import
import GoogleAPICalendar from 'google-calendar-react/GoogleAPICalendar';
Go to the https://console.developers.google.com/flows/enableapi?apiid=calendar. find your ApiKey and clientId And
Create a file googleApiConfig.json in the root directory with your googleApi clientId and ApiKey.
Setup
handleAuthClick:
/** * Sign in with a Google account. */ public : void
handleSignOutClick:
/** * Sign out user google account */ public : void
Example
; ; Component { superprops; thishandleItemClick = thishandleItemClick; } public : void if name === 'sign-in' GoogleAPICalendar; else if name === 'sign-out' GoogleAPICalendar; : ReactNode return <button onClick= this > sign-in </button> <button onClick= this > sign-out </button> ;
setCalendar:
/** * Set the default attribute calendar * @param */ public : void
Manage Event
You need to be registered with handleAuthClick.
Create Event:
/** * Create calendar event * @param * @param * @returns */ public : any
Create Event From Now:
/** * Create an event from the current time for a certain period. * @param * @param * @param * @param * @returns */ public : any
Example
; const eventFromNow: object = summary: "Poc Dev From Now" time: 480; GoogleAPICalendar ;
List All Upcoming Events:
/** * List all events in the calendar * @param * @param * @returns */ public : any
Example
; if GoogleAPICalendarsign GoogleAPICalendar;
Utils
listenSign:
/** * Execute the callback function when a user is disconnected or connected with the sign status. * @param callback */ public : void
onLoad:
/** * Execute the callback function when gapi is loaded (gapi needs to be loaded to use any other methods) * @param callback */ public : void
Example
; ; Component<any any> { superprops; thisstate = sign: GoogleAPICalendarsign ; thissignUpdate = thissignUpdate; GoogleAPICalendar; } public : any this : ReactNode return <div>thisstatesign</div> ;