IS there a way that I can showcase my personal calendar in my website so people can see my availability. So i’ve dwelled on this for some hours now, i was able to do it if I did google authentication but the thing is i dont want to access other peoples calendar data, i just want to read mine to showcase them. I did the setup on google console cloud with the apikey , client_id , but through that route I’ve only found ways where I ask for “visitors” to authenticate their account. I’ve done the iframe method , but i just want to fetch the calendar data to “design” it after. Summarizing , Want to setup my own calendar in my website without needing to authenticate on google everytime i enter the website.
Sorry if this might be confusing , i can post some code that i got and answer anything. PLS HELP
function gapiLoaded() {
gapi.load('client', initializeGapiClient);
}
async function initializeGapiClient() {
try {
await gapi.client.init({
apiKey: API_KEY,
discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"],
});
gisLoaded();
} catch (error) {
console.error('Error initializing Google Calendar API client:', error);
}
}
function gisLoaded() {
const tokenClient = google.accounts.oauth2.initTokenClient({
client_id: CLIENT_ID,
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: handleAuthResponse,
});
tokenClient.requestAccessToken();
}
function handleAuthResponse(response) {
if (response.error) {
console.error('Error authenticating:', response);
return;
}
loadCalendarEvents();
}
async function loadCalendarEvents() {
try {
const response = await gapi.client.calendar.events.list({
'calendarId': CALENDAR_ID,
'timeMin': (new Date()).toISOString(),
'showDeleted': false,
'singleEvents': true,
'maxResults': 10,
'orderBy': 'startTime'
});
const events = response.result.items;
const calendarDiv = document.getElementById('calendar');
calendarDiv.innerHTML = ''; // Clear loading message
events.forEach(event => {
const eventDiv = document.createElement('div');
eventDiv.className = 'event';
const titleDiv = document.createElement('div');
titleDiv.className = 'event-title';
titleDiv.textContent = event.summary;
eventDiv.appendChild(titleDiv);
const timeDiv = document.createElement('div');
timeDiv.className = 'event-time';
const start = event.start.dateTime || event.start.date;
timeDiv.textContent = new Date(start).toLocaleString();
eventDiv.appendChild(timeDiv);
calendarDiv.appendChild(eventDiv);
});
} catch (error) {
console.error('Error fetching calendar events:', error);
}
}
window.onload = function() {
console.log('window.onload: Page fully loaded');
gapiLoaded();
};
Now the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>St. Patrick's Irish Pub - Menu</title>
<link rel="stylesheet" href="calendar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://apis.google.com/js/api.js"></script>
</head>
<body>
<div class="calendar" id="calendar"></div>
<script src="calendar2.js"></script>
</body>
</html>
the js i have here is the one where it asks for authentication , and it works… but as i said , i dont want to ask visitors to authenticate…
I’m probably being dumb , and i hope i am . Thank you in advance cause i know you’re machines!