Kubessandra / React Google Calendar Api
Licence: mit
An api to manage your google calendar
Stars: ✭ 93
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Labels
Projects that are alternatives of or similar to React Google Calendar Api
Photo Exif Toolkit
Photo Exif Toolkit Android app entirely written using Kotlin language
Stars: ✭ 37 (-60.22%)
Mutual labels: google-api
Gkeepapi
An unofficial client for the Google Keep API.
Stars: ✭ 1,066 (+1046.24%)
Mutual labels: google-api
node-google-calendar
Simple node module that supports Google Calendar API
Stars: ✭ 76 (-18.28%)
Mutual labels: google-api
blog
Source code for the posts of my blog https://theroadtodelphi.com/
Stars: ✭ 96 (+3.23%)
Mutual labels: google-api
Figma To Google Slides
Convert Figma frames into a Google Slides presentation 🍭
Stars: ✭ 385 (+313.98%)
Mutual labels: google-api
ga-fetcher
Fetch Google Analytics data with Google APIs in Node.js 🚠
Stars: ✭ 14 (-84.95%)
Mutual labels: google-api
youtube-playlist-json
Returns JSON of Youtube Playlist using YouTube Data API v3
Stars: ✭ 14 (-84.95%)
Mutual labels: google-api
google-calendar-api
Demo Project for Google Calendar API Using Spring Boot Rest API with OAuth2
Stars: ✭ 25 (-73.12%)
Mutual labels: google-api
go-clean-architecture
Example go clean architecture folder pattern
Stars: ✭ 28 (-69.89%)
Mutual labels: google-api
Forge View.googledrive.models
View models from Google Drive: Sample Viewer application that displays files of supported formats from Google Drive, and generates them in the Viewer
Stars: ✭ 18 (-80.65%)
Mutual labels: google-api
google-streetview-images
Pull google streetview panoramic images along a route.
Stars: ✭ 45 (-51.61%)
Mutual labels: google-api
Google Sheets To Html
JavaScript that draws a Google Sheets document into an HTML table (includes base web template)
Stars: ✭ 53 (-43.01%)
Mutual labels: google-api
ics2gcal
Import .ics files into Google Calendar with only two clicks.
Stars: ✭ 21 (-77.42%)
Mutual labels: google-api
React Places Autocomplete
React component for Google Maps Places Autocomplete
Stars: ✭ 1,265 (+1260.22%)
Mutual labels: google-api
Expenses
💰Expense tracker using Google Sheets 📉 as a storage written in React
Stars: ✭ 1,105 (+1088.17%)
Mutual labels: google-api
Geocoder
🌎 GoLang package that provides an easy way to use the Google Geocoding API
Stars: ✭ 23 (-75.27%)
Mutual labels: google-api
react-google-calendar-api
An api to manage your google calendar
Install
npm install --save react-google-calendar-api
Use
import ApiCalendar from 'react-google-calendar-api';
Typescript Import
import ApiCalendar from 'react-google-calendar-api/src/ApiCalendar';
Create a file apiGoogleconfig.json in the root directory with your googleApi clientId and ApiKey. https://console.developers.google.com/flows/enableapi?apiid=calendar.
{
"clientId": "<CLIENT_ID>",
"apiKey": "<API_KEY>",
"scope": "https://www.googleapis.com/auth/calendar",
"discoveryDocs": [
"https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"
]
}
Setup
handleAuthClick:
/**
* Sign in with a Google account.
*/
public handleAuthClick(): void
handleSignOutClick:
/**
* Sign out user google account
*/
public handleSignoutClick(): void
Example
import React, {ReactNode, SyntheticEvent} from 'react';
import ApiCalendar from 'react-google-calendar-api';
export default class DoubleButton extends React.Component {
constructor(props) {
super(props);
this.handleItemClick = this.handleItemClick.bind(this);
}
public handleItemClick(event: SyntheticEvent<any>, name: string): void {
if (name === 'sign-in') {
ApiCalendar.handleAuthClick();
} else if (name === 'sign-out') {
ApiCalendar.handleSignoutClick();
}
}
render(): ReactNode {
return (
<button
onClick={(e) => this.handleItemClick(e, 'sign-in')}
>
sign-in
</button>
<button
onClick={(e) => this.handleItemClick(e, 'sign-out')}
>
sign-out
</button>
);
}
}
setCalendar:
/**
* Set the default attribute calendar
* @param {string} newCalendar ID.
*/
public setCalendar(newCalendar: string): void
Manage Event
You need to be registered with handleAuthClick.
Create Event:
/**
* Create calendar event
* @param {string} CalendarId for the event by default use 'primary'.
* @param {object} Event with start and end dateTime
* @returns {any} Promise on the event.
*/
public createEvent(event: object, calendarId: string = this.calendar): any {
Create Event From Now:
/**
* Create an event from the current time for a certain period.
* @param {number} Time in minutes for the event
* @param {string} Summary(Title) of the event
* @param {string} Description of the event (optional)
* @param {string} CalendarId by default calendar set by setCalendar.
* @param {string} timeZone The time zone in which the time is specified. (Formatted as an IANA Time Zone Database name, e.g. "Europe/Zurich".)
* @returns {any} Promise on the event.
*/
public createEventFromNow({time, summary, description = ''}: any, calendarId: string = this.calendar, timeZone: string = "Europe/Paris"): any
Example
import ApiCalendar from 'react-google-calendar-api';
const eventFromNow: object = {
summary: 'Poc Dev From Now',
time: 480,
};
ApiCalendar.createEventFromNow(eventFromNow)
.then((result: object) => {
console.log(result);
})
.catch((error: any) => {
console.log(error);
});
List All Upcoming Events:
/**
* List all events in the calendar
* @param {number} maxResults to see
* @param {string} calendarId to see by default use the calendar attribute
* @returns {any} Promise with the result.
*/
public listUpcomingEvents(maxResults: number, calendarId: string = this.calendar): any
Example
import ApiCalendar from 'react-google-calendar-api';
if (ApiCalendar.sign)
ApiCalendar.listUpcomingEvents(10).then(({ result }: any) => {
console.log(result.items);
});
List All Events:
/**
* List all events in the calendar queried by custom query options
* See all available options here https://developers.google.com/calendar/v3/reference/events/list
* @param {object} queryOptions to see
* @param {string} calendarId to see by default use the calendar attribute
* @returns {any}
*/
public listEvents(queryOptions, calendarId = this.calendar): any
Example
import ApiCalendar from 'react-google-calendar-api';
if (ApiCalendar.sign)
ApiCalendar.listEvents({
timeMin: new Date()..toISOString(),
timeMax: new Date().addDays(10).toISOString(),
showDeleted: true,
maxResults: 10,
orderBy: 'updated'
}).then(({ result }: any) => {
console.log(result.items);
});
Update Event
/**
* Update Calendar event
* @param {string} calendarId for the event.
* @param {string} eventId of the event.
* @param {object} event with details to update, e.g. summary
* @returns {any} Promise object with result
*/
public updateEvent(event: object, eventId: string, calendarId: string = this.calendar): any
Example
import ApiCalendar from 'react-google-calendar-api';
const event = {
summary: 'New Event Title',
};
ApiCalendar.updateEvent(event, '2eo85lmjkkd2i63uo3lhi8a2cq').then(console.log);
Delete Event
/**
* Delete an event in the calendar.
* @param {string} eventId of the event to delete.
* @param {string} calendarId where the event is.
* @returns {any} Promise resolved when the event is deleted.
*/
public deleteEvent(eventId: string, calendarId: string = this.calendar): any
Example
import ApiCalendar from 'react-google-calendar-api';
ApiCalendar.deleteEvent('2eo85lmjkkd2i63uo3lhi8a2cq').then(console.log);
Get Event
/**
* Get Calendar event
* @param {string} calendarId for the event.
* @param {string} eventId specifies individual event
* @returns {any}
*/
public getEvent(eventId: string, calendarId: string = this.calendar): any
Example
import ApiCalendar from 'react-google-calendar-api';
ApiCalendar.getEvent('2eo85lmjkkd2i63uo3lhi8a2cq').then(console.log);
Get BasicUserProfile Event
/**
* @returns {any} Get the user's basic profile information.
* Documentation: https://developers.google.com/identity/sign-in/web/reference#googleusergetbasicprofile
*/
public getBasicUserProfile(): any
Examples
import ApiCalendar from 'react-google-calendar-api';
ApiCalendar.getBasicUserProfile('2eo85lmjkkd2i63uo3lhi8a2cq')
.getEmail()
.then(console.log);
ApiCalendar.getBasicUserProfile('2eo85lmjkkd2i63uo3lhi8a2cq')
.getName()
.then(console.log);
or with async/wait
import ApiCalendar from 'react-google-calendar-api';
const response = await ApiCalendar.getBasicUserProfile();
response.getEmail();
Utils
listenSign:
/**
* Execute the callback function when a user is disconnected or connected with the sign status.
* @param callback
*/
public listenSign(callback: any): void
onLoad:
/**
* Execute the callback function when gapi is loaded (gapi needs to be loaded to use any other methods)
* @param callback
*/
public onLoad(callback: any): void
Example
import React, {ReactNode} from 'react';
import ApiCalendar from 'react-google-calendar-api';
export default class StatusSign extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = {
sign: ApiCalendar.sign,
};
this.signUpdate = this.signUpdate.bind(this);
ApiCalendar.onLoad(() => {
ApiCalendar.listenSign(this.signUpdate);
});
}
public signUpdate(sign: boolean): any {
this.setState({
sign
})
}
render(): ReactNode {
return (
<div>{this.state.sign}</div>
);
}
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].