Workshop Booking Calendar widget

Rebekah.M.691 · October 30

Hi Team I tried to create a workshop booking calendar with a search function with out system admin being able to add events but i needed the OAUTH2 code and the my brightspace instance do you know where I would get these things?

I then tried to change it so the events where added in a separate widget but populated in the calendar but i couldnt get the calendar to update with the new events. Can someone look at the code for me?

COde 1:
Code 2: Event calendar widget
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Calendar Widget</title>
<style>
#calendar {
width: 320px;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
#month-year {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.days {
display: flex;
flex-wrap: wrap;
margin: -2px;
}
.day {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border: 1px solid #eee;
margin: 2px;
position: relative;
}
.event-button {
display: block;
background-color: #007bff;
color: white;
text-align: center;
padding: 3px;
border-radius: 3px;
margin-top: 5px;
text-decoration: none;
}
.event-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>

<div id="calendar">
<div id="month-year">
<button id="prev-month"><</button>
<h3 id="month-display"></h3>
<button id="next-month">></button>
</div>
<div class="days" id="days"></div>
<div id="event-list">
<h4>Events for Selected Month</h4>
<div id="events"></div>
</div>
</div>

<script>
window.events = {}; // Use a global events object
const currentDate = new Date();

function renderCalendar() {
const monthDisplay = document.getElementById('month-display');
const daysContainer = document.getElementById('days');
daysContainer.innerHTML = '';

const month = currentDate.getMonth();
const year = currentDate.getFullYear();
monthDisplay.innerText = `${currentDate.toLocaleString('default', { month: 'long' })} ${year}`;

const firstDay = new Date(year, month, 1);
const totalDays = new Date(year, month + 1, 0).getDate();
const startDay = firstDay.getDay();

for (let i = 0; i < startDay; i++) {
daysContainer.appendChild(document.createElement('div')).className = 'day';
}

for (let day = 1; day <= totalDays; day++) {
const dayDiv = document.createElement('div');
dayDiv.className = 'day';
dayDiv.innerText = day;

const dateKey = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
if (events[dateKey]) {
events[dateKey].forEach(event => {
const eventButton = document.createElement('a');
eventButton.className = 'event-button';
eventButton.href = event.link;
eventButton.target = '_blank';
eventButton.innerText = `${event.title} at ${event.time}`;
dayDiv.appendChild(eventButton);
});
}

daysContainer.appendChild(dayDiv);
}

displayEvents();
}

function displayEvents() {
const eventsContainer = document.getElementById('events');
eventsContainer.innerHTML = '';

for (let day = 1; day <= 31; day++) {
const dateKey = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
if (events[dateKey]) {
events[dateKey].forEach(event => {
const eventButton = document.createElement('a');
eventButton.className = 'event-button';
eventButton.href = event.link;
eventButton.target = '_blank';
eventButton.innerText = `${event.title} at ${event.time}`;
eventsContainer.appendChild(eventButton);
});
}
}
}

document.getElementById('prev-month').addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() - 1);
renderCalendar();
});

document.getElementById('next-month').addEventListener('click', () => {
currentDate.setMonth(currentDate.getMonth() + 1);
renderCalendar();
});

// Initialize calendar on page load
renderCalendar();
</script>

</body>
</html>
Add event widget code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Event Widget</title>
<style>
#add-event-widget {
border: 1px solid #ccc;
padding: 10px;
width: 320px;
margin-bottom: 20px;
}
#add-event-widget input, button {
width: calc(100% - 12px);
margin: 5px 0;
padding: 5px;
}
</style>
</head>
<body>

<div id="add-event-widget">
<h4>Add Event</h4>
<input type="text" id="event-title" placeholder="Event Title" />
<input type="text" id="event-time" placeholder="Event Time (HH:MM AM/PM)" />
<input type="text" id="event-link" placeholder="Event Link" />
<input type="date" id="event-date" />
<button id="submit-event-button">Add Event</button>
</div>

<script>
const events = window.events; // Use the global events object

document.getElementById('submit-event-button').addEventListener('click', function() {
const title = document.getElementById('event-title').value;
const time = document.getElementById('event-time').value;
const link = document.getElementById('event-link').value;
const date = document.getElementById('event-date').value;

if (title && time && link && date) {
if (!events[date]) {
events[date] = [];
}
events[date].push({ title, time, link });

// Clear the input fields
document.getElementById('event-title').value = '';
document.getElementById('event-time').value = '';
document.getElementById('event-link').value = '';
document.getElementById('event-date').value = '';

alert("Event added! Please refresh the calendar to see the changes.");
} else {
alert("Please fill out all fields.");
}
});
</script>

</body>
</html>

Also please note I amnot a proper coder just learning by googling

Developers

Workshop Booking Calendar widget

Categories