Introduction
In one of our projects, we need to integrate google calendar into the website.
So the company for which we were making this web app involves managing payrolls and personal data for the employees of several companies.
The problem which we faced is how to sync their all payroll dates data with google calendar?
As there were lots of dates to be synced with google calendar.
These are the codes which we wrote to do initial setup:-
Create Event
Creating an event in a google calendar is pretty simple. you will get a straightforward sample in various languages on Google reference API for events
add this script to head
You will get all the references for inserting an event from https://developers.google.com/calendar/v3/reference/events/insert
const { gapi } = window;
var CLIENT_ID = “YOUR CLIENT ID”;
var API_KEY = “YOUR API KEY”;
var DISCOVERY_DOCS = [“https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest”];
var SCOPES = “https://www.googleapis.com/auth/calendar”;
export function handleClientLoad(callback) {
gapi.load(“client:auth2”, initClient);
callback();
}
export function initClient() {
gapi.client
.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
})
.then(function() {
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
});
}
export function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
createEvent();
} else {
handleAuthClick();
}
}
export function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
export function createEvent(name) {
var resource = {
summary: “name”,
start: {
dateTime: “2018-06-28T09:00:00-07:00”
},
end: {
dateTime: “2018-06-28T09:00:00-07:00”
}
};
gapi.client.calendar.events
.insert({
calendarId: “primary”,
resource: resource
})
.then(function(response) {
console.log(“Event Created”);
});
}
After you create an event in google calendar you will get an response with event id as a return which you have to store to somewhere so you can perform the further operation like updating an event or deleting an event.
Update Event
You can easily update any event by calling event.update() and passing event id that you get in response while creating an event.
you can check here for all the necessary params that need to pass to update an event.
Delete Event
Delete an event by calling event.delete() and passing event id that you get in response while creating an event.
you can check here for all the necessary params that need to pass to delete an event.
ISSUES
Issues that we faced were :-
1) Google does not give an option to create multiple events simultaneously which means you have to fire the create request one by one. So if we are trying this out in the frontend, the UI might hang and the site can crash due to a lot of ajax request fired.
2) If we somehow manage to create all the events with respect to dates in the project, then we have another issue to save the event ID that is coming in response, which is really important to perform other operations like update, delete etc
3) We will have to save these id’s to the database. To do that we will be using an API which we have to fire after the success of creating an event. this process will consist of many ajax request which will eventually crash the site.
SOLUTIONS
To achieve this we have to take help of back-end and perform several steps in the backend to achieve full synchronization.
1) Creating an event function should be done in the backend so that the UI does not get affected. we will be calling the event recursively and as soon as all the events are created with relevant dates, the backend will send a push notification to the client end to show the message that Sync is complete.
2) The issue with saving the Id’s is also resolved as now we are performing event create at backend so we don’t have to call extra ajax request from frontend as earlier to save the data in DB.