Workshop Booking Calendar widget
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
Comments
-
Is this a standalone widget, independent from the Calendar widget? If so, calendars need a database to store the data of the events, right now from what I can see is that you have your calendar items added locally which would then be removed when the user refreshes. If the user goes between months instead of refreshes the item shows on the calendar but as soon as the user closes the browser or refreshes, it's gone. But your comment at the beginning of the code points to this explanation: You have a widget that creates events and that data is sent to the Calendar widget. Mainly you have a form, that form submission populates the Calendar Widget. Is that my understanding?
As for the Oauth2.0 authentication, if you are creating internal applications that are controlled by the users Role in the ORG or Course, then you should look at csrfToken = localStorage.getItem('XSRF.Token');); which will allow you to grab the users token and verify the user has permission to do the task. From what I understand, the Oauth 2.0 is needed when you are connecting to D2L from an external resource, like a database. I have yet to figure this out, but all my apps I create use the local token system because I run them inside D2L.
If I am understanding your question correctly again, the form submission would create the calendar event, but that requires sending the data to the calendar and that needs to be done through an API Call to create calendar events. https://docs.valence.desire2learn.com/res/calendar.html#post--d2l-api-le-(version)-(orgUnitId)-calendar-event-
