Event Calendar Mini Nieuw

<!-- Event Calendar Mini · Bron: Origin UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="evc"><div class="evc__cal"><div class="evc__nav"><button type="button" class="evc__pv" aria-label="Vorige maand">&lsaquo;</button><b class="evc__m" aria-live="polite"></b><button type="button" class="evc__nx" aria-label="Volgende maand">&rsaquo;</button></div><div class="evc__wd"><span>ma</span><span>di</span><span>wo</span><span>do</span><span>vr</span><span>za</span><span>zo</span></div><div class="evc__grid" role="grid"></div></div><div class="evc__side"><b class="evc__day"></b><ul class="evc__list" aria-live="polite"></ul></div></div>
</div>

/* Event Calendar Mini · Bron: Origin UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.evc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;width:390px;max-width:95%;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a}
.evc__cal{background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:6px;padding:8px}
.evc__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.evc__nav b{font-size:12px;font-weight:700;text-transform:capitalize}
.evc__nav button{width:22px;height:22px;border:0;background:none;border-radius:3px;font:600 15px/1 'Switzer',system-ui,sans-serif;color:#0a0a0a;cursor:pointer;padding:0 0 2px}
.evc__nav button:hover{background:#f4f3f1}
.evc__wd,.evc__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.evc__wd span{font:500 8px/1 'JetBrains Mono',monospace;text-align:center;color:rgba(10,10,10,.45);padding:3px 0}
.evc__d{position:relative;height:22px;border:0;background:none;border-radius:3px;font:500 11px/1 'Switzer',system-ui,sans-serif;color:#0a0a0a;cursor:pointer;padding:0;font-variant-numeric:tabular-nums}
.evc__d:hover{background:#f4f3f1}
.evc__d.is-out{color:rgba(10,10,10,.25)}
.evc__d.is-sel{background:#0a0a0a;color:#fff}
.evc__d.has::after{content:'';position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#F5480F}
.evc__d:focus-visible,.evc__nav button:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.evc__side{min-width:0;padding-top:4px}
.evc__day{display:block;font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#F5480F;margin-bottom:8px}
.evc__list{list-style:none;margin:0;padding:0}
.evc__list li{border-left:2px solid #F5480F;padding:2px 0 2px 8px;margin-bottom:8px;font-size:12px;line-height:1.3;animation:evc-in .3s ease-out both}
.evc__list li.is-int{border-left-color:#0a0a0a}
.evc__list li small{display:block;font:500 9px/1.4 'JetBrains Mono',monospace;color:rgba(10,10,10,.5)}
.evc__list li.is-none{border:0;padding:0;color:rgba(10,10,10,.5)}
@keyframes evc-in{from{opacity:0;transform:translateY(4px)}}
@media(max-width:420px){.evc{gap:8px}.evc__d{height:20px;font-size:10px}.evc__list li{font-size:11px;margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){.evc__list li{animation:none}}

// Event Calendar Mini · Bron: Origin UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.evc'); if (!w) return;
    var grid = w.querySelector('.evc__grid'), mEl = w.querySelector('.evc__m'), dayEl = w.querySelector('.evc__day'), list = w.querySelector('.evc__list');
    var MND = ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'], DAG = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'];
    var EV = {
      '2026-10-2': [['08:00', 'Monteur Gouda, cv-ketel'], ['14:00', 'Overleg aannemer', 1]],
      '2026-10-6': [['09:30', 'Oplevering badkamer · Leiden']],
      '2026-10-8': [['09:30', 'Oplevering keuken · Delft'], ['13:00', 'Inmeten Kerkstraat 14 · Gouda'], ['16:30', 'Teamoverleg planning', 1]],
      '2026-10-13': [['10:00', 'Offertegesprek · Zoetermeer']],
      '2026-10-15': [['11:00', 'Leverancier tegels', 1]],
      '2026-10-20': [['08:30', 'Start verbouwing · Rijswijk'], ['15:00', 'Bouwvergadering', 1]],
      '2026-10-23': [['09:00', 'Keuring elektra · Den Haag']],
      '2026-10-28': [['13:30', 'Oplevering dakkapel · Voorburg']],
      '2026-11-3': [['10:00', 'Nazorg Delft']],
      '2026-11-11': [['09:00', 'Inmeten · Wassenaar'], ['14:00', 'Kwartaalcijfers', 1]],
      '2026-11-19': [['13:00', 'Oplevering kantoor · Leiden']],
      '2026-9-24': [['09:00', 'Opname schade · Pijnacker']]
    };
    var view = new Date(2026, 9, 1), sel = new Date(2026, 9, 8);
    function key(d) { return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(); }
    function same(a, b) { return key(a) === key(b); }
    function pick(d) {
      sel = d; dayEl.textContent = DAG[d.getDay()] + ' ' + d.getDate() + ' ' + MND[d.getMonth()].slice(0, 3);
      var ev = EV[key(d)] || []; list.innerHTML = '';
      if (!ev.length) { var n = document.createElement('li'); n.className = 'is-none'; n.textContent = 'Geen afspraken'; list.appendChild(n); }
      ev.forEach(function (e, i) { var li = document.createElement('li'); if (e[2]) li.className = 'is-int'; li.style.animationDelay = (i * 60) + 'ms'; var sm = document.createElement('small'); sm.textContent = e[0]; li.appendChild(sm); li.appendChild(document.createTextNode(e[1])); list.appendChild(li); });
      [].forEach.call(grid.children, function (b) { var on = b.dataset.k === key(d); b.classList.toggle('is-sel', on); b.tabIndex = on ? 0 : -1; b.setAttribute('aria-selected', String(on)); });
    }
    function render() {
      mEl.textContent = MND[view.getMonth()] + ' ' + view.getFullYear(); grid.innerHTML = '';
      var first = new Date(view.getFullYear(), view.getMonth(), 1), off = (first.getDay() + 6) % 7;
      var start = new Date(first); start.setDate(1 - off);
      var weeks = Math.ceil((off + new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate()) / 7);
      for (var i = 0; i < weeks * 7; i++) {
        var d = new Date(start); d.setDate(start.getDate() + i);
        var b = document.createElement('button'); b.type = 'button'; b.className = 'evc__d'; b.textContent = d.getDate(); b.dataset.k = key(d); b.tabIndex = -1;
        if (d.getMonth() !== view.getMonth()) b.classList.add('is-out');
        if (EV[key(d)]) b.classList.add('has');
        b.setAttribute('aria-label', d.getDate() + ' ' + MND[d.getMonth()] + (EV[key(d)] ? ', ' + EV[key(d)].length + ' afspraken' : ''));
        (function (dd) { b.addEventListener('click', function () { if (dd.getMonth() !== view.getMonth()) { view = new Date(dd.getFullYear(), dd.getMonth(), 1); render(); } pick(dd); }); })(d);
        grid.appendChild(b);
      }
      var inView = sel.getMonth() === view.getMonth() ? sel : new Date(view.getFullYear(), view.getMonth(), 1);
      pick(inView);
    }
    w.querySelector('.evc__pv').addEventListener('click', function () { view = new Date(view.getFullYear(), view.getMonth() - 1, 1); render(); });
    w.querySelector('.evc__nx').addEventListener('click', function () { view = new Date(view.getFullYear(), view.getMonth() + 1, 1); render(); });
    grid.addEventListener('keydown', function (e) {
      var m = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[e.key]; if (m === undefined) return; e.preventDefault();
      var d = new Date(sel); d.setDate(d.getDate() + m);
      if (d.getMonth() !== view.getMonth()) { view = new Date(d.getFullYear(), d.getMonth(), 1); sel = d; render(); } else pick(d);
      var b = grid.querySelector('[data-k="' + key(d) + '"]'); if (b) b.focus();
    });
    render();
}
init(document.querySelector('.jouw-container'));