I want to sync my own calendar (react-big-calendar) with a Google Calendar. I can retrieve Google calendar events from a primary calendar and display them in my own calendar built using react-big-calendar library. When I add a new event to a Google calendar, I want to see the event added to my own calendar as well without reloading the page. Because on every reload I call a function that fetches the events from a Google Calendar. But I need to do that once there is a change to a Google Calendar. How can I do that?
Backend: python, django
Frontend: react js
# authorization
def get_crendetials_google():
flow = InstalledAppFlow.from_client_secrets_file(
"credentials.json", SCOPES)
creds = flow.run_local_server(port=8080)
pickle.dump(creds, open("token.txt", "wb"))
return creds
@api_view(['GET'])
def get_all_events(request):
creds = None
if path.exists("token.txt"):
creds = pickle.load(open("token.txt", "rb"))
if not creds or not creds.valid:
if creds and creds.expired and creds.refresh_token:
creds.refresh(Request())
else:
creds = get_crendetials_google()
result = []
# instantiating a calendar and retrieving google events
try:
service = build("calendar", "v3", credentials=creds)
response = service.events().list(calendarId="primary").execute()
for event in response["items"]:
title = event.get("summary")
obj = {}
if title:
obj["title"] = title
obj["start"] = event["start"]
obj["end"] = event["end"]
result.append(obj)
result = reformat_events(request, result)
except OSError as err:
return Response({'error': "OS error: {0}".format(err)}, status=400)
return Response(result, status=200) useEffect(() => {
getEvents();
}, []);
const getEvents = async () => {
let response = await fetch("http://localhost:8000/gcevents/", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + String(authTokens.access),
},
});
let data = await response.json();
if (data) {
props.sendEvents(data);
}
};