Browser Compatibility Fix for JavaScript

i need one there can fix this javascript: document.addEventListener('DOMContentLoaded', () => {
const barContainer = document.querySelector('.bar-container');
const timeLabels = document.querySelector('.time-labels');
const errorMessage = document.getElementById('error-message');
const dateElement = document.getElementById('date');

function logMessage(message) {
const logElement = document.createElement('p');
logElement.style.color = '#333';
logElement.textContent = message;
errorMessage.appendChild(logElement);
console.log(message);
}

const urlParams = new URLSearchParams(window.location.search);
const dateParam = urlParams.get('date');
const currentDate = dateParam ? new Date(dateParam) : new Date();
const formattedDate = formatDate(currentDate);

dateElement.innerText = formattedDate;
fetchOpeningHoursAndShifts(formattedDate);

function fetchOpeningHoursAndShifts(date) {
Promise.all([
fetch(`get_opening_hours.php?date=${date}`).then(response => response.json()),
fetch(`get_shifts_by_date.php?date=${date}`).then(response => response.json())
]).then(([openingHours, shifts]) => {
logMessage(`Fetched opening hours: ${JSON.stringify(openingHours)}`);
logMessage(`Fetched shifts: ${JSON.stringify(shifts)}`);
displayShifts(shifts, openingHours);
}).catch(error => {
logMessage(`Error fetching data: ${error.message}`);
console.error("Fetch error:", error);
});
}

function displayShifts(shifts, openingHours) {
barContainer.innerHTML = '';
timeLabels.innerHTML = '';

let openingTime = parseTime(openingHours.open_time);
let closingTime = parseTime(openingHours.close_time);

logMessage(`Parsed opening time: ${openingTime} minutes`);
logMessage(`Parsed closing time: ${closingTime} minutes`);

// Justering for midnat
if (closingTime <= openingTime) {
logMessage(`Closing time is before or at opening time, adjusting for midnight crossover.`);
closingTime += 1440;
}

let lastEnd = openingTime;

shifts.forEach(shift => {
let shiftStart = parseTime(shift.start_time);
let shiftEnd = parseTime(shift.end_time);

logMessage(`Processing shift: Start time ${shiftStart} (${shift.start_time}), End time ${shiftEnd} (${shift.end_time})`);

// Håndtering af skift over midnat
if (shiftStart > shiftEnd) {
logMessage(`Shift crosses midnight, adjusting shift end time.`);
shiftEnd += 1440; // Juster sluttid for skift, der krydser midnat
}

// Tilføj "ikke dækket" blok før denne vagt
if (shiftStart > lastEnd) {
logMessage(`Adding not-covered block: From ${lastEnd} to ${shiftStart}`);
addBlock(lastEnd, shiftStart, 'not-covered');
}

// Tilføj "dækket" blok for denne vagt
logMessage(`Adding covered block: From ${shiftStart} to ${shiftEnd}`);
addBlock(shiftStart, shiftEnd, 'covered');
lastEnd = shiftEnd;
});

// Tilføj en sidste "ikke dækket" blok efter sidste vagt til lukketid
if (lastEnd < closingTime) {
logMessage(`Adding final not-covered block: From ${lastEnd} to ${closingTime}`);
addBlock(lastEnd, closingTime, 'not-covered');
}

generateTimeLabels(openingTime, closingTime);
}

function addBlock(start, end, type) {
if (start < end) {
const block = document.createElement('div');
block.className = `minute-block ${type}`;
const totalMinutes = 1440; // Total minutter på en dag
const containerWidth = barContainer.offsetWidth;
const blockWidth = ((end - start) / totalMinutes) * containerWidth;

logMessage(`Calculating block width: Start ${start}, End ${end}, Block width ${blockWidth}px`);

block.style.width = `${blockWidth}px`;
barContainer.appendChild(block);

logMessage(`Added block - Start: ${start}, End: ${end}, Width: ${blockWidth}px, Class: ${type}`);
} else {
logMessage(`Skipped block with no duration (start: ${start}, end: ${end})`);
}
}

function generateTimeLabels(openingTime, closingTime) {
for (let minute = openingTime; minute <= closingTime; minute += 60) {
const label = document.createElement('span');
const hour = Math.floor(minute / 60) % 24;
label.textContent = `${hour.toString().padStart(2, '0')}:00`;
timeLabels.appendChild(label);
logMessage(`Generated time label: ${label.textContent}`);
}
}

function parseTime(timeString) {
const [hours, minutes] = timeString.split(':').map(Number);
const totalMinutes = hours * 60 + minutes;
logMessage(`Parsed time string "${timeString}" to ${totalMinutes} minutes`);
return totalMinutes;
}

function formatDate(date) {
const day = String(date.getDate()).padStart(2, '0');
const month = String(date.getMonth() + 1).padStart(2, '0');
const year = date.getFullYear();
const formatted = `${year}-${month}-${day}`;
logMessage(`Formatted date: ${formatted}`);
return formatted;
}
});

here can you see the schifttime:https://festival-web.com/Tonder/get_shifts_by_date.php?date=2024-08-08