I am currently working with a JSON file that contains information about various events, which I am displaying on a calendar.
Whenever an event is scheduled for a particular day, I dynamically add a div element to indicate the presence of an event on the calendar.
The calendar plugin I have integrated is called VanillaCalendar. During the DOM load, I initialize the calendar and implement a function to iterate through the JSON data and assign events to corresponding days on the calendar.
This snippet showcases my loop logic for assigning events to specific days:
for (const {month, days} of eventData) {
for (const {day, events} of days) {
const key = day.split('-').map(p => p.padStart(2, '0')).join('-');
let dayElement = document.querySelector(`[data-calendar-day="${key}"]`);
let eventWrapper = document.createElement("div");
eventWrapper.classList.add("event-wrapper");
dayElement.append(eventWrapper);
for (const {title, category} of events) {
let singleEvent = document.createElement("div");
singleEvent.classList.add("event", category);
eventWrapper.append(singleEvent);
}
}
To view a live demo, please visit my CodePen showcase.
However, one issue I am encountering is that when switching months, the events fail to populate on the calendar.
In case you explore my CodePen and switch the month, you will notice that events from February or any other month are not displayed despite having relevant data in the JSON file.
If anyone can provide insights on how I could display events even across different months, I would greatly appreciate it.
I attempted utilizing the VanillaCalendar clickMonth action to trigger my function upon clicking the month arrows. However, incorporating a delay like below did not resolve the issue of populating events for February or other months:
clickArrow(e, self) {
setTimeout(assignEventsToCalendar, 3000);
}