{"id":99,"date":"2025-10-22T05:31:04","date_gmt":"2025-10-22T03:31:04","guid":{"rendered":"https:\/\/speeltuindehoef.nl\/?page_id=99"},"modified":"2025-10-22T16:37:25","modified_gmt":"2025-10-22T14:37:25","slug":"evenementen","status":"publish","type":"page","link":"https:\/\/speeltuindehoef.nl\/index.php\/evenementen\/","title":{"rendered":"Evenementen"},"content":{"rendered":"<style>.bbcal-wrap{max-width:980px;margin:1rem auto}\n.bbcal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:.5rem}\n.bbcal-header a{text-decoration:none;border:1px solid #ddd;padding:.35rem .6rem;border-radius:8px}\n.bbcal-title{font-weight:700;font-size:1.15rem}\n.bbcal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;border:1px solid #e5e5e5;border-radius:12px;padding:8px;background:#fafafa}\n.bbcal .dow{font-weight:600;text-align:center;padding:.4rem 0}\n.bbcal .day{\n    min-height:72px;background:#FFEFFF;border:1px solid #E8D7F2;border-radius:10px;padding:6px;position:relative;\n    display:flex;flex-direction:column;gap:6px\n}\n.bbcal .day .num{font-weight:700;font-size:.95rem}\n.bbcal .day.muted{opacity:.45}\n.bbcal .day.has-events{background:#CAB1E2;border-color:#A88FCC;cursor:pointer}\n.bbcal .day.has-events:hover{filter:brightness(0.98)}\n.bbcal .day.has-events:focus{outline:2px solid #B56417}\n.bbcal .day.has-events[aria-current=\"date\"]{outline:2px solid #B56417; box-shadow:0 0 0 2px #FFF inset}\n.bbcal .day.today{outline:2px solid #B56417; box-shadow:0 0 0 2px #FFF inset}\n.bbcal .badges, .bbcal .badge { display:none!important }\n#bb-day-panel{margin-top:12px}\n#bb-day-panel .panel-head{font-weight:700;margin-bottom:8px}\n#bb-day-panel .empty{padding:.5rem 0;color:#666}\n.bb-event{border:1px solid #eee;border-radius:10px;padding:10px;margin-bottom:8px;background:#fff;display:block}\n.bb-event.has-thumb{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start}\n.bb-event .thumb img{width:150px;height:150px;object-fit:cover;border-radius:8px;display:block}\n.bb-event .date{font-weight:700;margin-bottom:8px}\n.bb-event .title{font-weight:800;margin:2px 0 6px 0}\n.bb-event .desc{margin:0 0 6px 0;line-height:1.4}\n.bb-event .time{color:#444;font-size:.95rem}\n#bb-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:9999}\n#bb-lightbox img{max-width:90vw;max-height:90vh;border-radius:8px}\n#bb-lightbox.show{display:flex}\n#bb-lightbox .close{position:absolute;top:14px;right:18px;font-size:28px;color:#fff;cursor:pointer}\n@media (max-width:640px){\n  .bbcal{gap:4px;padding:6px}\n  .bbcal .day{min-height:64px}\n}<\/style><script>(function(){\n  function openLb(src){\n    var el = document.getElementById('bb-lightbox');\n    if(!el){\n      el = document.createElement('div');\n      el.id = 'bb-lightbox';\n      el.innerHTML = '<span class=\"close\" aria-label=\"Sluiten\">\u00d7<\/span><img alt=\"\">';\n      document.body.appendChild(el);\n      el.addEventListener('click', function(e){\n        if(e.target === el || e.target.classList.contains('close')) el.classList.remove('show');\n      });\n      document.addEventListener('keydown', function(e){\n        if(e.key === 'Escape'){ el.classList.remove('show'); }\n      });\n    }\n    var img = el.querySelector('img');\n    img.src = src;\n    el.classList.add('show');\n  }\n\n  document.addEventListener('click', function(e){\n    var a = e.target.closest('a.bb-lightbox');\n    if(a){\n      e.preventDefault();\n      openLb(a.getAttribute('href'));\n    }\n  });\n\n  document.addEventListener('change', function(e){\n    var sel = e.target.closest('select.bb-time-sel');\n    if(!sel) return;\n    var val = sel.value;\n    var target = sel.getAttribute('data-target');\n    var input = target ? document.querySelector(target) : null;\n    if(input && val){ input.value = val; }\n  });\n\n  function escHTML(s){\n    if(s == null) return '';\n    var d = document.createElement('div');\n    d.textContent = s;\n    return d.innerHTML;\n  }\n\n  \/\/ ---- RENDER HELPERS ----\n  function renderEventCard(it, dateLabel){\n    var hasImg = !!it.image;\n    var isRental = (it.origin && it.origin.toLowerCase() === 'zaalverhuur');\n    var html = '<div class=\"bb-event' + (hasImg ? ' has-thumb' : '') + '\">';\n    if(hasImg){\n      html += '<div class=\"thumb\"><a class=\"bb-lightbox\" href=\"' + it.image + '\"><img decoding=\"async\" src=\"' + it.image + '\" alt=\"\"><\/a><\/div>';\n    }\n    html += '<div class=\"info\">';\n    html += '<div class=\"date\">' + (dateLabel || '') + '<\/div>';\n    if(isRental){\n      html += '<div class=\"title\">Zaal verhuurd<\/div>';\n      html += '<div class=\"time\">van ' + (it.from||'\u2014') + ' tot ' + (it.to||'\u2014') + (it.loc ? ' \u2022 ' + escHTML(it.loc) : '') + '<\/div>';\n    } else {\n      var title = it.title ? escHTML(it.title) : 'Evenement';\n      html += '<div class=\"title\">' + title + '<\/div>';\n      if(it.desc){ html += '<div class=\"desc\">' + it.desc + '<\/div>'; }\n      html += '<div class=\"time\">Tijd: ' + (it.from||'\u2014') + ' \u2013 ' + (it.to||'\u2014') + (it.loc ? ' \u2022 ' + escHTML(it.loc) : '') + '<\/div>';\n    }\n    html += '<\/div><\/div>';\n    return html;\n  }\n\n  function renderDayEvents(map, dkey, panel){\n    var data = map[dkey];\n    if(!data || !data.items || !data.items.length){\n      panel.innerHTML = '<div class=\"empty\">Geen evenementen op deze dag.<\/div>';\n      return;\n    }\n    var monthBtn = '<button type=\"button\" class=\"bb-month-btn\" data-view=\"month\">Alle evenementen deze maand<\/button>';\n    var html = '<div class=\"panel-head\">Evenementen op ' + (data.label || dkey) + '<\/div>' + monthBtn;\n\n    \/\/ Sorteer die dag op tijd\n    var items = data.items.slice().sort(function(a,b){\n      return (a.from||'') < (b.from||'') ? -1 : (a.from||'') > (b.from||'') ? 1 : 0;\n    });\n\n    items.forEach(function(it){\n      html += renderEventCard(it, data.label || dkey);\n    });\n    panel.innerHTML = html;\n    panel.dataset.view = 'day';\n  }\n\n  function renderMonthEvents(map, panel){\n    \/\/ Titel ophalen uit de kalenderkop\n    var monthTitleEl = document.querySelector('.bbcal-title');\n    var monthTitle = monthTitleEl ? monthTitleEl.textContent.trim() : 'deze maand';\n\n    var keys = Object.keys(map || {});\n    if(keys.length === 0){\n      panel.innerHTML = '<div class=\"empty\">Geen evenementen in ' + escHTML(monthTitle) + '.<\/div>';\n      panel.dataset.view = 'month';\n      return;\n    }\n\n    \/\/ Sorteer op datum en tijd\n    keys.sort(); \/\/ YYYY-MM-DD strings: alfabetisch = chronologisch\n    var html = '<div class=\"panel-head\">Alle evenementen in ' + escHTML(monthTitle) + '<\/div>';\n\n    keys.forEach(function(dkey){\n      var day = map[dkey];\n      if(!day || !day.items || !day.items.length) return;\n\n      \/\/ Binnen de dag sorteren op tijd\n      var items = day.items.slice().sort(function(a,b){\n        return (a.from||'') < (b.from||'') ? -1 : (a.from||'') > (b.from||'') ? 1 : 0;\n      });\n      items.forEach(function(it){\n        html += renderEventCard(it, day.label || dkey);\n      });\n    });\n\n    panel.innerHTML = html;\n    panel.dataset.view = 'month';\n  }\n\n  \/\/ ---- INIT + INTERACTIE ----\n  document.addEventListener('DOMContentLoaded', function(){\n    var mapEl = document.getElementById('bb-events-map');\n    var panel = document.getElementById('bb-day-panel');\n    if(!mapEl || !panel) return;\n\n    var map = {};\n    try { map = JSON.parse(mapEl.textContent || '{}'); } catch(e){ map = {}; }\n\n    \/\/ Standaard: toon hele maand\n    renderMonthEvents(map, panel);\n\n    \/\/ Klik op dagvakje => dagweergave\n    document.addEventListener('click', function(e){\n      var cell = e.target.closest('.bbcal .day.has-events');\n      if(cell){\n        var dkey = cell.getAttribute('data-dkey');\n        renderDayEvents(map, dkey, panel);\n\n        document.querySelectorAll('.bbcal .day.has-events[aria-current=\"date\"]').forEach(function(c){\n          c.removeAttribute('aria-current');\n        });\n        cell.setAttribute('aria-current','date');\n        return;\n      }\n\n      \/\/ Terug naar maandweergave\n      var btn = e.target.closest('.bb-month-btn');\n      if(btn){\n        renderMonthEvents(map, panel);\n      }\n    });\n\n    \/\/ Toetsenbord: Enter\/Spatie op dag met events => dagweergave\n    document.addEventListener('keydown', function(e){\n      if(e.key !== 'Enter' && e.key !== ' ') return;\n      var cell = document.activeElement && document.activeElement.classList && document.activeElement.classList.contains('day') ? document.activeElement : null;\n      if(!cell || !cell.classList.contains('has-events')) return;\n      e.preventDefault();\n      var dkey = cell.getAttribute('data-dkey');\n      renderDayEvents(map, dkey, panel);\n\n      document.querySelectorAll('.bbcal .day.has-events[aria-current=\"date\"]').forEach(function(c){\n        c.removeAttribute('aria-current');\n      });\n      cell.setAttribute('aria-current','date');\n    });\n  });\n})();<\/script>        <div class=\"bbcal-wrap\">\n          <div class=\"bbcal-header\">\n            <a href=\"https:\/\/speeltuindehoef.nl\/index.php\/evenementen\/?bb_y=2026&#038;bb_m=4\">&larr; Vorige<\/a>\n            <div class=\"bbcal-title\">mei 2026<\/div>\n            <a href=\"https:\/\/speeltuindehoef.nl\/index.php\/evenementen\/?bb_y=2026&#038;bb_m=6\">Volgende &rarr;<\/a>\n          <\/div>\n\n          <div class=\"bbcal\">\n            <div class=\"dow\">ma<\/div><div class=\"dow\">di<\/div><div class=\"dow\">wo<\/div><div class=\"dow\">do<\/div><div class=\"dow\">vr<\/div><div class=\"dow\">za<\/div><div class=\"dow\">zo<\/div><div class=\"day muted\"><\/div><div class=\"day muted\"><\/div><div class=\"day muted\"><\/div><div class=\"day muted\"><\/div><div class=\"day\"><span class=\"num\">1<\/span><\/div><div class=\"day\"><span class=\"num\">2<\/span><\/div><div class=\"day\"><span class=\"num\">3<\/span><\/div><div class=\"day\"><span class=\"num\">4<\/span><\/div><div class=\"day\"><span class=\"num\">5<\/span><\/div><div class=\"day\"><span class=\"num\">6<\/span><\/div><div class=\"day\"><span class=\"num\">7<\/span><\/div><div class=\"day\"><span class=\"num\">8<\/span><\/div><div class=\"day has-events\" tabindex=\"0\" role=\"button\" aria-label=\"Toon evenementen op 09-05-2026\" data-dkey=\"2026-05-09\"><span class=\"num\">9<\/span><\/div><div class=\"day\"><span class=\"num\">10<\/span><\/div><div class=\"day\"><span class=\"num\">11<\/span><\/div><div class=\"day\"><span class=\"num\">12<\/span><\/div><div class=\"day has-events\" tabindex=\"0\" role=\"button\" aria-label=\"Toon evenementen op 13-05-2026\" data-dkey=\"2026-05-13\"><span class=\"num\">13<\/span><\/div><div class=\"day\"><span class=\"num\">14<\/span><\/div><div class=\"day\"><span class=\"num\">15<\/span><\/div><div class=\"day\"><span class=\"num\">16<\/span><\/div><div class=\"day today\"><span class=\"num\">17<\/span><\/div><div class=\"day\"><span class=\"num\">18<\/span><\/div><div class=\"day\"><span class=\"num\">19<\/span><\/div><div class=\"day\"><span class=\"num\">20<\/span><\/div><div class=\"day\"><span class=\"num\">21<\/span><\/div><div class=\"day\"><span class=\"num\">22<\/span><\/div><div class=\"day\"><span class=\"num\">23<\/span><\/div><div class=\"day\"><span class=\"num\">24<\/span><\/div><div class=\"day\"><span class=\"num\">25<\/span><\/div><div class=\"day\"><span class=\"num\">26<\/span><\/div><div class=\"day\"><span class=\"num\">27<\/span><\/div><div class=\"day\"><span class=\"num\">28<\/span><\/div><div class=\"day\"><span class=\"num\">29<\/span><\/div><div class=\"day has-events\" tabindex=\"0\" role=\"button\" aria-label=\"Toon evenementen op 30-05-2026\" data-dkey=\"2026-05-30\"><span class=\"num\">30<\/span><\/div><div class=\"day\"><span class=\"num\">31<\/span><\/div>          <\/div>\n\n          <!-- Dag-panel (vult bij klik) -->\n          <div id=\"bb-day-panel\">\n            <div class=\"empty\">Klik op een paars dag-vakje om de evenementen van die dag te zien.<\/div>\n          <\/div>\n\n          <!-- Lightbox container -->\n          <div id=\"bb-lightbox\" aria-hidden=\"true\"><\/div>\n\n          <!-- JSON-kaart met evenementen per dag -->\n          <script type=\"application\/json\" id=\"bb-events-map\">{\"2026-05-09\":{\"label\":\"09-05-2026\",\"items\":[{\"from\":\"10:00\",\"to\":\"13:00\",\"image\":null,\"title\":\"gereserveerd verjaardag\",\"desc\":\"\",\"origin\":\"manual\",\"loc\":\"speeltuin de Hoef\"}]},\"2026-05-13\":{\"label\":\"13-05-2026\",\"items\":[{\"from\":\"09:30\",\"to\":\"13:50\",\"image\":null,\"title\":\"gereserveerd schoolreisje\",\"desc\":\"\",\"origin\":\"manual\",\"loc\":\"speeltuin de Hoef\"}]},\"2026-05-30\":{\"label\":\"30-05-2026\",\"items\":[{\"from\":\"11:00\",\"to\":\"13:30\",\"image\":null,\"title\":\"verjaardag\",\"desc\":\"\",\"origin\":\"manual\",\"loc\":\"speeltuin de Hoef\"}]}}<\/script>\n        <\/div>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-99","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/speeltuindehoef.nl\/index.php\/wp-json\/wp\/v2\/pages\/99","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/speeltuindehoef.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/speeltuindehoef.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/speeltuindehoef.nl\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/speeltuindehoef.nl\/index.php\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":1,"href":"https:\/\/speeltuindehoef.nl\/index.php\/wp-json\/wp\/v2\/pages\/99\/revisions"}],"predecessor-version":[{"id":100,"href":"https:\/\/speeltuindehoef.nl\/index.php\/wp-json\/wp\/v2\/pages\/99\/revisions\/100"}],"wp:attachment":[{"href":"https:\/\/speeltuindehoef.nl\/index.php\/wp-json\/wp\/v2\/media?parent=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}