Få svar, der er tilpasset til dig

Log ind for at få svar baseret på gemte chats, lave billeder og uploade filer.


Log ind
Ja, den JavaScript-syntax er korrekt.
Du definerer en konstant CALENDAR_IDS som et array af strings:

/* --- JAVASCRIPT LOGIK --- */
const CALENDAR_IDS = [
    "vfuglene@gmail.com", "vfuglenefj@gmail.com", "vfuglenejn@gmail.com",
    "vfuglenejp@gmail.com", "vfuglenegc@gmail.com", "vfuglenelj@gmail.com",
    "vfuglenesm@gmail.com", "vfsteen@gmail.com", "vfoleulla@gmail.com",
    "vfugleneguest@gmail.com", "vfuglenenh@gmail.com", "vfuglenelisj@gmail.com", "vfuglenekh@gmail.com"
];
Det er gyldigt JavaScript og vil fungere fint.


er syntax korrekt <iframe src="https://calendar.google.com/calendar/embed?title=''&amp;showTz=0&amp;showCalendars=0&amp;
						mode=AGENDA&amp;
						height=800&amp;
						wkst=2&amp;
						showPrint=0&amp;
						src=vfuglene%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfuglenefj%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfuglenejn%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfuglenejp%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfuglenegc%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfuglenelj%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfuglenesm%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfsteen%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfoleulla%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfugleneguest%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfuglenenh%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfuglenelisj%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						src=vfuglenekh%40gmail.com&ctz=Europe%2FCopenhagen&amp;
						&hl=da"
						style="border-width:0" width="100%" height="1000" margin-right="10">
						</iframe>

Næsten — der er et par små problemer i din iframe-kode:

Du har et ekstra &amp; lige før &hl=da

margin-right="10" er ikke et gyldigt attribut på <iframe>

title='' er lidt mærkeligt formateret

Mange linjeskift i src kan give problemer i nogle browsere

Her er en ryddet og korrekt version:

<iframe
    src="https://calendar.google.com/calendar/embed?title=&showTz=0&showCalendars=0&mode=AGENDA&height=800&wkst=2&showPrint=0&src=vfuglene%40gmail.com&ctz=Europe%2FCopenhagen&src=vfuglenefj%40gmail.com&ctz=Europe%2FCopenhagen&src=vfuglenejn%40gmail.com&ctz=Europe%2FCopenhagen&src=vfuglenejp%40gmail.com&ctz=Europe%2FCopenhagen&src=vfuglenegc%40gmail.com&ctz=Europe%2FCopenhagen&src=vfuglenelj%40gmail.com&ctz=Europe%2FCopenhagen&src=vfuglenesm%40gmail.com&ctz=Europe%2FCopenhagen&src=vfsteen%40gmail.com&ctz=Europe%2FCopenhagen&src=vfoleulla%40gmail.com&ctz=Europe%2FCopenhagen&src=vfugleneguest%40gmail.com&ctz=Europe%2FCopenhagen&src=vfuglenenh%40gmail.com&ctz=Europe%2FCopenhagen&src=vfuglenelisj%40gmail.com&ctz=Europe%2FCopenhagen&src=vfuglenekh%40gmail.com&ctz=Europe%2FCopenhagen&hl=da"
    style="border:0; margin-right:10px;"
    width="100%"
    height="1000">
</iframe>
Jeg flyttede også margin-right ind i style, hvor det hører hjemme.


begivenheden  som afholdes samme dag vises ikke i popup på visse telefoner, pc,og tablets <!-- POPUP CONTAINER (Skjult som standard) -->
<div id="turPopup" class="modal" onclick="tjekLuk(event)">
    
    <div id="hovedVindue" class="main-list" onclick="event.stopPropagation()">
        <span class="close-button" onclick="lukPopup()">&times;</span>
        
        <div id="dragHandle">⋮⋮</div>

        <h2 style="margin-top: 0; margin-bottom: 5px; color: #2e7d32; font-size: 1.3em; text-align: left;">Førstkommende Ture</h2>
        
        <!-- Container til "Vis tidligere..." knappen -->
        <div id="tidligere-knap-container"></div>
        
        <!-- Selve listen over de 3 aktive ture -->
        <div id="ture">Henter ture...</div>
    </div>

    <div id="detalje-popup" class="detalje-flyer" onclick="event.stopPropagation()">
        <span class="close-button" style="font-size: 20px;" onclick="skjulDetaljer()">&times;</span>
        <h3 id="detalje-titel" style="margin: 0 0 10px 0; color: #1b5e20;"></h3>
        <div id="detalje-info"></div>
    </div>
</div>
<script>
/* --- JAVASCRIPT LOGIK --- */
const CALENDAR_IDS = [
    "vfuglene@gmail.com", "vfuglenefj@gmail.com", "vfuglenejn@gmail.com",
    "vfuglenejp@gmail.com", "vfuglenegc@gmail.com", "vfuglenelj@gmail.com",
    "vfuglenesm@gmail.com", "vfsteen@gmail.com", "vfoleulla@gmail.com",
    "vfugleneguest@gmail.com", "vfuglenenh@gmail.com", "vfuglenelisj@gmail.com", "vfuglenekh@gmail.com"
];

let gemteTure = [];
let startIndeks = 0; 

function makeDraggable(el, handle) {
    let p1 = 0, p2 = 0, p3 = 0, p4 = 0;
    handle.onmousedown = dragStart;
    handle.ontouchstart = dragStart;

    function dragStart(e) {
        const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
        const clientY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;
        p3 = clientX; p4 = clientY;
        document.onmouseup = closeDrag;
        document.onmousemove = elementDrag;
        document.ontouchend = closeDrag;
        document.ontouchmove = elementDrag;
        skjulDetaljer();
    }

    function elementDrag(e) {
        const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
        const clientY = e.type === 'touchmove' ? e.touches[0].clientY : e.clientY;
        p1 = p3 - clientX; p2 = p4 - clientY;
        p3 = clientX; p4 = clientY;
        el.style.bottom = "auto";
        el.style.right = "auto";
        el.style.top = (el.offsetTop - p2) + "px";
        el.style.left = (el.offsetLeft - p1) + "px";
    }

    function closeDrag() {
        document.onmouseup = null; document.onmousemove = null;
        document.ontouchend = null; document.ontouchmove = null;
    }
}

function aabenPopup() {
    const el = document.getElementById("turPopup");
    const hv = document.getElementById("hovedVindue");
    if (el) el.style.display = "block";
    if (hv) {
        hv.style.top = (window.innerHeight - hv.offsetHeight - 40) + "px";
        hv.style.left = (window.innerWidth - hv.offsetWidth - 40) + "px";
    }
}

function lukPopup() { 
    document.getElementById("turPopup").style.display = "none"; 
    skjulDetaljer(); 
}

function tjekLuk(e) {
    if (e.target.id === "turPopup") {
        lukPopup();
    }
}

function visDetaljer(e, index) {
    e.stopPropagation();
    const tur = gemteTure[index];
    const flyer = document.getElementById("detalje-popup");
    const hv = document.getElementById("hovedVindue");

    document.getElementById("detalje-titel").innerText = tur.title;
    document.getElementById("detalje-info").innerHTML = 
        <p style="margin: 0 0 5px 0;">📅 <strong>${tur.start.toLocaleDateString("da-DK", {day:'numeric', month:'long'})}</strong></p>
        ${tur.loc ? <p style="margin: 0 0 10px 0;">📍 ${tur.loc}</p> : ''}
        <div class="scroll-beskrivelse">
            ${tur.desc || 'Ingen beskrivelse.'}
        </div>
    ;

    const rect = hv.getBoundingClientRect();
    let offsetLeft = rect.left - 330;
    let offsetTop = rect.top;

    if (window.innerWidth < 600) {
        offsetLeft = 10;
        offsetTop = 50;
        flyer.style.width = "85%";
    }

    flyer.style.left = offsetLeft + "px";
    flyer.style.top = offsetTop + "px";
    flyer.style.display = "flex";
}

function skjulDetaljer() { 
    const el = document.getElementById("detalje-popup");
    if(el) el.style.display = "none"; 
}

function visTure() {
    const container = document.getElementById("ture");
    const tidlContainer = document.getElementById("tidligere-knap-container");
    
    container.innerHTML = "";
    tidlContainer.innerHTML = "";

    if (gemteTure.length === 0) {
        container.innerHTML = "Ingen ture fundet.";
        return;
    }

    // 1. HÅNDTERING AF "VIS TIDLIGERE..." (Over listen)
    if (startIndeks > 0) {
        const visTidligereKnap = document.createElement("div");
        visTidligereKnap.className = "tur vis-navigation vis-tidligere";
        visTidligereKnap.innerText = "Vis tidligere...";
        visTidligereKnap.onclick = (ev) => {
            ev.stopPropagation();
            skjulDetaljer();
            startIndeks -= 1; // Går 1 punkt tilbage i listen
            visTure();
        };
        tidlContainer.appendChild(visTidligereKnap);
    }

    // 2. HENT DE 3 AKTUELLE TURE
    const aktuelleTure = gemteTure.slice(startIndeks, startIndeks + 3);

    aktuelleTure.forEach((e, i) => {
        const faktiskIndex = startIndeks + i;
        const datoStr = e.start.toLocaleDateString("da-DK", { weekday: 'short', day: '2-digit', month: 'short' });
        const turDiv = document.createElement("div");
        turDiv.className = "tur";
        turDiv.onclick = (ev) => visDetaljer(ev, faktiskIndex);
        turDiv.innerHTML = <div class="dato">${datoStr}</div><div class="titel">${e.title}</div>;
        container.appendChild(turDiv);
    });

    // 3. HÅNDTERING AF "VIS FLERE..." (Under listen)
    if (startIndeks + 3 < gemteTure.length) {
        const visFlereKnap = document.createElement("div");
        visFlereKnap.className = "tur vis-navigation vis-flere";
        visFlereKnap.innerText = "Vis senere...";
        visFlereKnap.onclick = (ev) => {
            ev.stopPropagation();
            skjulDetaljer();
            startIndeks += 1; // Går 1 punkt frem i listen
            visTure();
        };
        container.appendChild(visFlereKnap);
    }
}

async function hentAlleTure() {
    let alleEvents = [];
    
    const fetchPromises = CALENDAR_IDS.map(async (id) => {
        try {
            const icsUrl = "https://calendar.google.com/calendar/ical/" + encodeURIComponent(id) + "/public/basic.ics";
            const proxyUrl = "proxy.php?url=" + encodeURIComponent(icsUrl);
            const res = await fetch(proxyUrl);
            const text = await res.text();
            return parseICS(text);
        } catch (e) { return []; }
    });

    const resultater = await Promise.all(fetchPromises);
    alleEvents = [].concat(...resultater);

    const nu = new Date();
    nu.setHours(0, 0, 0, 0);

    gemteTure = alleEvents
        .filter(e => {
            const eventDato = new Date(e.start);
            eventDato.setHours(0, 0, 0, 0);
            return eventDato >= nu; 
        })
        .sort((a, b) => a.start - b.start);

    visTure();
    
    makeDraggable(document.getElementById("hovedVindue"), document.getElementById("dragHandle"));
    aabenPopup();
}

function parseICS(data) {
    const events = [];
    const lines = data.split(/\r?\n/);
    let event = null;
    const unfoldedLines = [];
    
    for (let i = 0; i < lines.length; i++) {
        if (lines[i].startsWith(" ") || lines[i].startsWith("\t")) {
            unfoldedLines[unfoldedLines.length - 1] += lines[i].substring(1);
        } else {
            unfoldedLines.push(lines[i]);
        }
    }

    for (let line of unfoldedLines) {
        if (line.startsWith("BEGIN:VEVENT")) {
            event = { title: '', desc: '', loc: '' };
        } else if (line.startsWith("SUMMARY:")) {
            event.title = line.substring(8).replace(/\\,/g, ",").trim();
        } else if (line.startsWith("DESCRIPTION:")) {
            event.desc = line.substring(12);
        } else if (line.startsWith("LOCATION:")) {
            event.loc = line.substring(9).replace(/\\,/g, ",").trim();
        } else if (line.startsWith("DTSTART")) {
            const val = line.includes(":") ? line.split(":")[1] : ""; 
            if (val && val.length >= 8) {
                const y = val.substring(0, 4);
                const m = val.substring(4, 6) - 1;
                const d = val.substring(6, 8);
                event.start = new Date(y, m, d);
            }
        } else if (line.startsWith("END:VEVENT")) {
            if (event && event.start) {
                event.desc = event.desc.replace(/\\n/gi, "<br>").replace(/\\,/g, ",").trim();
                events.push(event);
            }
            event = null;
        }
    }
    return events;
}

window.addEventListener('load', hentAlleTure);
</script>

Problemet skyldes sandsynligvis dato-håndteringen i denne del:

const nu = new Date();
nu.setHours(0, 0, 0, 0);
og senere:

const eventDato = new Date(e.start);
eventDato.setHours(0, 0, 0, 0);
return eventDato >= nu;
På nogle telefoner/tablets (især Safari på iPhone/iPad) kan timezone og lokale datoformater give forskelle omkring midnat.
Det betyder at begivenheder “i dag” nogle gange bliver tolket som i går og filtreret væk.

Den største fejl er dog typisk her:

event.start = new Date(y, m, d);
Denne laver datoen i lokal tidszone, og forskellige enheder kan tolke den forskelligt.

Skift hele din DTSTART parsing til dette:

} else if (line.startsWith("DTSTART")) {
    const val = line.includes(":") ? line.split(":")[1] : "";

    if (val && val.length >= 8) {
        const y = parseInt(val.substring(0, 4));
        const m = parseInt(val.substring(4, 6)) - 1;
        const d = parseInt(val.substring(6, 8));

        // Brug UTC for stabil dato på alle enheder
        event.start = new Date(Date.UTC(y, m, d));
    }
}
Og erstat filtreringen med:

const nu = new Date();
nu.setUTCHours(0, 0, 0, 0);

gemteTure = alleEvents
    .filter(e => {
        const eventDato = new Date(e.start);
        eventDato.setUTCHours(0, 0, 0, 0);
        return eventDato >= nu;
    })
    .sort((a, b) => a.start - b.start);
Det løser normalt:

iPhone/Safari problemer

Android Chrome forskelle

Windows vs Mac timezone-fejl

begivenheder samme dag som “forsvinder”

Derudover bør du også ændre:

window.addEventListener('load', hentAlleTure);
til:

document.addEventListener('DOMContentLoaded', hentAlleTure);
fordi load nogle gange venter på alle ressourcer/billeder, hvilket kan give ustabil timing på mobile enheder.

Få mere intelligente svar, upload filer og billeder, og meget mere.

Log ind

Tilmeld dig gratis


Stemme
Vi anvender cookies

Cookies hjælper dette site med at fungere, måle brug og understøtte marketing. Administrer dine cookiepræferencer når som helst. Læs mere i vores cookiepolitik.


Afvis ikke-vigtige

Acceptér alle