const API_KEY = 'YOUR_GOOGLE_CALENDAR_API_KEY'; // Replace with your Google API Key
const CALENDAR_ID = 'your_calendar_id@group.calendar.google.com'; // Replace with your Google Calendar ID
const API_URL = `https://www.googleapis.com/calendar/v3/calendars/${CALENDAR_ID}/events?key=${API_KEY}&singleEvents=true&orderBy=startTime`;
// Fetch events from Google Calendar API
async function fetchEvents() {
const response = await fetch(API_URL);
const data = await response.json();
const events = data.items.map(event => ({
title: event.summary,
start: new Date(event.start.dateTime || event.start.date),
end: new Date(event.end.dateTime || event.end.date),
description: event.description || '',
location: event.location || '',
url: event.htmlLink
}));
return events;
}
// Populate the calendar with fetched events
async function populateCalendar() {
const events = await fetchEvents();
const calendarDays = document.getElementById("calendarDays");
calendarDays.innerHTML = "";
// Get the current date and month
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
// Fill in empty days at the beginning
for (let i = 0; i < firstDay; i++) {
const blankDay = document.createElement("div");
calendarDays.appendChild(blankDay);
}
// Loop through each day and render it
for (let day = 1; day <= daysInMonth; day++) {
const date = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const dayCell = document.createElement("div");
dayCell.classList.add("text-center", "p-4", "bg-gray-700", "rounded", "relative");
dayCell.textContent = day;
// Check if an event falls on this day
events.forEach(event => {
if (event.start.toDateString() === new Date(date).toDateString()) {
const eventDot = document.createElement("span");
eventDot.classList.add("absolute", "top-2", "right-2", "cursor-pointer");
eventDot.style.color = "#FF9900"; // Orange color dot
eventDot.innerHTML = "●";
eventDot.onclick = () => openEventModal(event);
dayCell.appendChild(eventDot);
}
});
calendarDays.appendChild(dayCell);
}
}
// Open event modal with Google Calendar event details
function openEventModal(event) {
document.getElementById('modalTitle').innerText = event.title;
document.getElementById('modalDate').innerText = event.start.toLocaleDateString();
document.getElementById('modalDescription').innerText = event.description;
document.getElementById('modalLocation').innerText = event.location;
document.getElementById('modalLink').href = event.url;
document.getElementById('eventModal').classList.remove('hidden');
}
// Initialize the calendar with current month and events
let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();
populateCalendar();