I am writing a interactive PHP calendar that uses JavaScript and CSS to add events.
I have got the event modal to work when clicking on a calendar icon, however I followed the same process for this new ‘add event’ modal and it doesn’t seem to be opening. I have tried debugging it but can’t get to the bottom of it and assume that I am overlooking something because of my inexperience in this area. What could I do to get this function to work and for the html to appear?
My working JS event selector modal:
// Function that will open the event list modal
openEventModal(x, y, startDate, endDate) {
// If there is already a modal open, return false
if (this.isModalOpen) {
return false;
}
// Update the isModalOpen var
this.isModalOpen = true;
// Update the calendar CSS opacity property
document.querySelector('.calendar').style.opacity = '.3';
// Declare the events list
let eventsList = '<div class="events">';
let hasEvents = false;
// Iterate the events array
this.container.querySelectorAll('.days .event').forEach(element => {
// Determine the specified date
let eventDate = new Date(startDate);
let eventDate2 = new Date(startDate);
let eventDateStart = new Date(element.dataset.datestart);
eventDate.setDate(eventDate.getDate()-parseInt(element.dataset.day));
if (eventDate.toISOString().split('T')[0] == eventDateStart.toISOString().split('T')[0]) {
// Event template
eventsList += '<div class="event">';
eventsList += '<h5><i class="date">' + (eventDate2.toISOString().split('T')[0] == eventDateStart.toISOString().split('T')[0] ? this.formatAMPM(eventDateStart) : 'Ongoing') + '</i> — ' + element.innerHTML + '</h5>';
eventsList += '<p class="description">' + element.dataset.description + '</p>';
eventsList += '</div>';
hasEvents = true;
}
});
if (!hasEvents) {
eventsList += '<p>There are no events.</p>'
}
eventsList += '</div>';
// Declare the modal title, which will consist of the date
let dateTitle = new Date(startDate);
dateTitle = dateTitle.getDate() + ' ' + dateTitle.toLocaleString('default', { month: 'long' }) + ' ' + dateTitle.getFullYear();
// Add the date select template modal to the HTML document
document.body.insertAdjacentHTML('beforeend', `
<div class="calendar-event-modal">
<h5>${dateTitle}</h5>
${eventsList}
<a href='#' class="add_event">Add Event</a>
<a href="#" class="close">Close</a>
</div>
`);
// Select the above modal
let modalElement = document.querySelector('.calendar-event-modal');
// Retrieve the modal rect properties
let rect = modalElement.getBoundingClientRect();
// Position the modal (center center)
modalElement.style.top = parseInt(y-(rect.height/2)) + 'px';
modalElement.style.left = parseInt(x-(rect.width/2)) + 'px';
// Retrieve the calendar rect properties
let calendar_rect = document.querySelector('.calendar').getBoundingClientRect();
let calendar_x = (calendar_rect.width / 2) + calendar_rect.x;
let calendar_y = (calendar_rect.height / 2) + calendar_rect.y;
// Iterate all events
modalElement.querySelectorAll('.events .event').forEach(element => {
// Add event button onclick event
modalElement.querySelector('.add_event').onclick = event => {
event.preventDefault();
// Remove the current modal
modalElement.remove();
// Modal is no longer open
this.isModalOpen = false;
// Open the add event modal
this.openAddEventModal(calendar_x, calendar_y, startDate, endDate);
};
// Close button onclick event
modalElement.querySelector('.close').onclick = event => {
event.preventDefault();
// Remove the modal
modalElement.remove();
// Update the calendar CSS opacity property
document.querySelector('.calendar').style.opacity = '1';
// Modal is no longer open
this.isModalOpen = false;
};
});
The Add event Modal that won’t add:
openAddEventModal(x, y, startDate, endDate) {
if (this.isModalOpen) {
return false
}
this.isModalOpen =true;
document.querySelector('.calendar').style.opacity='.3';
let startDateStr, endDateStr, t;
document.body.insertAdjacentHTML('beforeend', `
<div class="calendar-add-event-modal">
<form>
<label for="title">Title</label>
<input id="title" name="title" type="text" placeholder="Title" value="${edit ? edit.title : ''}">
<label for="description">Description</label>
<textarea id="description" name="description" placeholder="Description">${edit ? edit.description : ''}</textarea>
<label for="startdate">Start Date</label>
<input id="startdate" name="startdate" type="datetime-local" value="${startDateStr}">
<label for="enddate">End Date</label>
<input id="enddate" name="enddate" type="datetime-local" value="${endDateStr}">
<label for="color">Color</label>
<input id="color" name="color" type="color" placeholder="Color" value="${edit ? edit.color : '#5373ae'}" list="presetColors">
<input type="hidden" name="eventid" value="">
<span id="msg"></span>
</form>
<a href="#" class="add_event">${edit ? 'Update' : 'Add'} Event</a>
<a href="#" class="close">Cancel</a>
</div>
`);
let modalElement = document.querySelector('.calendar-add-event-modal');
let rect = modalElement.getBoundingClientRect();
modalElement.style.top = parseInt(y-(rect.height/2)) + 'px';
modalElement.style.left = parseInt(y-(rect.height/2)) + 'px';
modalElement.querySelector('.add_event'.disabled=true);
fetch(this.ajaxUrl, {cache: 'no-store', method: 'POST', body: new FormData(modalElement.querySelector('form')) }).theb(response => response.text()).then(data => {
if(data.includes('success')) {
modalElement.remove();
this.fetchCalendar();
this.isModalOpen = false;
} else {
modalElement.querySelector('#msg').innerHTML = data;
modalElement.querySelector('.add_event').disabled = false;
}
});
I thought my iteration of the add_event function should make the html appear, but it doesn’t open and displays nothing, but seems to try to open.