Weekagenda met dagweergave Nieuw

Agenda van een fysiopraktijk in week- en dagweergave: afspraken als blokken op een tijdas, een nu-lijn die elke minuut meeschuift, vorige/volgende week, terug naar vandaag en een detailkaart bij klik op een blok (annuleren werkt). CSS grid met posities berekend uit minuten; op smalle schermen start hij in dagweergave. Koppel in productie aan je agenda-API of een iCal-feed.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- Weekagenda met dagweergave · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kwk">
  <div class="kwk__head">
    <button type="button" class="kwk__today">Vandaag</button>
    <button type="button" class="kwk__nav" data-d="-1" aria-label="Vorige week"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m14 6-6 6 6 6"/></svg></button>
    <button type="button" class="kwk__nav" data-d="1" aria-label="Volgende week"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m10 6 6 6-6 6"/></svg></button>
    <h3 class="kwk__title" aria-live="polite"></h3>
    <div class="kwk__seg" role="group" aria-label="Weergave">
      <button type="button" data-v="week" aria-pressed="true">Week</button><button type="button" data-v="dag" aria-pressed="false">Dag</button>
    </div>
  </div>
  <div class="kwk__days"></div>
  <div class="kwk__scroll" tabindex="0" aria-label="Afspraken">
    <div class="kwk__grid"></div>
  </div>
  <div class="kwk__card" role="dialog" aria-labelledby="kwk-ct" hidden>
    <div class="kwk__ctop"><h4 class="kwk__ct" id="kwk-ct" tabindex="-1"></h4><button type="button" class="kwk__close" aria-label="Details sluiten"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button></div>
    <p class="kwk__cm"></p>
    <div class="kwk__cact"><button type="button" class="kwk__cancel">Afspraak annuleren</button></div>
  </div>
  <p class="kwk__sr" aria-live="polite"></p>
</div>
</div>

/* Weekagenda met dagweergave · NedDev · eigen werk. */
.kwk{--ink:#0a0a0a;--pop:#F5480F;--pd:#b83a0b;--mut:#5b5b5b;--line:rgba(10,10,10,.1);--hh:52px;position:absolute;inset:0;display:flex;flex-direction:column;font-family:'Switzer',system-ui,sans-serif;font-size:12px;line-height:1.3;color:var(--ink);background:#fff;container:kwk/inline-size;text-align:left}
.kwk *,.kwk *::before,.kwk *::after{box-sizing:border-box}
.kwk svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kwk__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.kwk__head{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--line)}
.kwk__today,.kwk__nav,.kwk__seg button{height:26px;border:1px solid rgba(10,10,10,.2);border-radius:4px;background:#fff;color:var(--ink);font:500 11.5px/1 'Switzer',system-ui,sans-serif;cursor:pointer;transition:border-color .15s,background-color .15s}
.kwk__today{padding:0 8px}
.kwk__nav{width:26px;display:grid;place-items:center}
.kwk__today:hover,.kwk__nav:hover,.kwk__seg button:hover{border-color:var(--ink)}
.kwk__title{flex:1;min-width:0;margin:0 0 0 4px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kwk__seg{display:flex}
.kwk__seg button{padding:0 9px}
.kwk__seg button:first-child{border-radius:4px 0 0 4px}
.kwk__seg button:last-child{border-radius:0 4px 4px 0;margin-left:-1px}
.kwk__seg button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.kwk button:focus-visible,.kwk__scroll:focus-visible{outline:2px solid var(--pop);outline-offset:1px}
.kwk__days{display:grid;grid-template-columns:34px repeat(var(--n,5),1fr);border-bottom:1px solid var(--line)}
.kwk__dh{padding:5px 4px;font-size:11px;color:var(--mut);text-align:center;border-left:1px solid var(--line);white-space:nowrap}
.kwk__dh b{font-weight:600;color:var(--ink);font-size:12px}
.kwk__dh.is-today b{color:var(--pd)}
.kwk__dh button{width:100%;min-height:24px;border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0;border-radius:4px}
.kwk__dh button[aria-pressed="true"]{background:var(--ink);color:#fff}
.kwk__dh button[aria-pressed="true"] b{color:#fff}
.kwk__scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
.kwk__grid{position:relative;display:grid;grid-template-columns:34px repeat(var(--n,5),1fr);height:calc(var(--hh) * 12)}
.kwk__hours{position:relative}
.kwk__hours span{position:absolute;right:5px;font-size:11px;color:var(--mut);transform:translateY(-50%);font-variant-numeric:tabular-nums}
.kwk__col{position:relative;border-left:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--hh) - 1px),var(--line) calc(var(--hh) - 1px) var(--hh))}
.kwk__col.is-today{background-color:#fcf8f6}
.kwk__ev{position:absolute;left:2px;right:2px;display:block;padding:2px 4px;border:1px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);font:500 11px/1.2 'Switzer',system-ui,sans-serif;text-align:left;overflow:hidden;cursor:pointer;transition:background-color .15s,transform .15s}
.kwk__ev:hover{background:#f4f3f1}
.kwk__ev b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kwk__ev span{display:block;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kwk__ev--intake{background:var(--pop);border-color:var(--pop)}
.kwk__ev--intake:hover{background:#e3400a}
.kwk__ev--intake span{color:var(--ink)}
.kwk__ev--groep{background:var(--ink);color:#fff}
.kwk__ev--groep:hover{background:#2a2a2a}
.kwk__ev--groep span{color:#d8d6d2}
.kwk__ev.is-cancel{background:repeating-linear-gradient(135deg,#fff 0 4px,#efedea 4px 8px);border-style:dashed;border-color:#8a8a8a;color:var(--mut)}
.kwk__ev.is-cancel b{text-decoration:line-through}
.kwk__ev.is-cancel span{color:var(--mut)}
.kwk__ev[aria-expanded="true"]{outline:2px solid var(--ink);outline-offset:1px}
.kwk__now{position:absolute;left:-1px;right:0;height:0;border-top:2px solid var(--pop);z-index:2;pointer-events:none}
.kwk__now::before{content:'';position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:4px;background:var(--pop)}
.kwk__card{position:absolute;left:10px;right:10px;bottom:10px;z-index:5;padding:10px 12px;background:#fff;border:1px solid var(--ink);border-radius:4px;max-width:340px;margin-left:auto}
.kwk__card[hidden]{display:none}
.kwk__ctop{display:flex;align-items:flex-start;gap:8px}
.kwk__ct{flex:1;margin:0;font-size:13px;font-weight:600}
.kwk__ct:focus{outline:none}
.kwk__close{width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:4px;background:none;cursor:pointer;color:var(--ink)}
.kwk__close:hover{background:#f4f3f1}
.kwk__cm{margin:4px 0 8px;color:#333;font-size:11.5px;line-height:1.45}
.kwk__cancel{height:26px;padding:0 10px;border:1px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);font:500 11.5px/1 'Switzer',system-ui,sans-serif;cursor:pointer;transition:background-color .15s,color .15s}
.kwk__cancel:hover{background:var(--ink);color:#fff}
.kwk__cancel:disabled{opacity:.4;cursor:not-allowed}
.kwk__cancel:disabled:hover{background:#fff;color:var(--ink)}
@container kwk (max-width:380px){.kwk__today{display:none}.kwk__title{font-size:12px}}
@media (prefers-reduced-motion:reduce){.kwk *{transition:none!important}}

// Weekagenda met dagweergave · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.kwk'); if (!w) return;
    const grid = w.querySelector('.kwk__grid'), days = w.querySelector('.kwk__days'), sc = w.querySelector('.kwk__scroll');
    const title = w.querySelector('.kwk__title'), card = w.querySelector('.kwk__card'), sr = w.querySelector('.kwk__sr');
    const START = 7, END = 19, HH = 52;
    const fmtD = new Intl.DateTimeFormat('nl-NL', { weekday: 'short', day: 'numeric' });
    const fmtM = new Intl.DateTimeFormat('nl-NL', { day: 'numeric', month: 'short' });
    const fmtL = new Intl.DateTimeFormat('nl-NL', { weekday: 'long', day: 'numeric', month: 'long' });
    const today = new Date(); today.setHours(0, 0, 0, 0);
    const monday = d => { const x = new Date(d); x.setHours(0, 0, 0, 0); x.setDate(x.getDate() - ((x.getDay() + 6) % 7)); return x; };
    let wk = monday(today), view = w.clientWidth < 380 ? 'dag' : 'week';
    let dayIdx = Math.min(4, (today.getDay() + 6) % 7);
    const cancelled = new Set();
    // Nep-agenda: vijf dagpatronen die per week verschuiven.
    const P = [
      [['08:00', 30, 'Sanne de Vries', 'beh'], ['09:00', 60, 'Ahmed El Idrissi', 'intake'], ['10:30', 30, 'Joost Bakker', 'beh'], ['13:00', 60, 'Groepstraining rug', 'groep'], ['15:00', 30, 'Fatma Yilmaz', 'beh'], ['16:30', 45, 'Kees Verbeek', 'beh']],
      [['08:30', 45, 'Lotte Janssen', 'beh'], ['10:00', 30, 'Rohan Mahabier', 'beh'], ['11:00', 60, 'Ilse de Wit', 'intake'], ['14:00', 30, 'Mark Smit', 'beh'], ['17:00', 60, 'Groepstraining nek', 'groep']],
      [['08:00', 60, 'Groepstraining ochtend', 'groep'], ['09:30', 30, 'Noah Visser', 'beh'], ['11:30', 30, 'Emma Mulder', 'beh'], ['13:30', 60, 'Yusuf Kaya', 'intake'], ['15:30', 45, 'Anouk Bos', 'beh']],
      [['09:00', 30, 'Daan Meijer', 'beh'], ['10:00', 60, 'Sofia Rossi', 'intake'], ['12:00', 30, 'Pieter Kok', 'beh'], ['14:30', 30, 'Hanna Vos', 'beh'], ['16:00', 60, 'Groepstraining rug', 'groep']],
      [['08:30', 30, 'Mila Peters', 'beh'], ['09:30', 45, 'Thomas Hendriks', 'beh'], ['11:00', 30, 'Lisa van Dijk', 'beh'], ['13:00', 60, 'Bram de Graaf', 'intake'], ['15:00', 30, 'Eva Dekker', 'beh']]
    ];
    const TYPE = { beh: 'Behandeling', intake: 'Intake', groep: 'Groepstraining' };
    const WHO = ['Marloes (fysio)', 'Jeroen (fysio)', 'Samira (manueel)'];
    const wkNo = d => Math.round((monday(d) - monday(new Date(2026, 0, 5))) / 6048e5);
    function events(date) {
      const di = (date.getDay() + 6) % 7, n = wkNo(date);
      return P[(di + n * 2 + 50) % 5].map((e, i) => {
        const [h, m] = e[0].split(':').map(Number);
        return { id: date.toISOString().slice(0, 10) + '-' + i, start: h * 60 + m, dur: e[1], who: e[2], type: e[3], by: WHO[(i + di + n) % 3], room: 'Ruimte ' + ((i + di) % 3 + 1), date };
      });
    }
    const hm = m => Math.floor(m / 60) + ':' + String(m % 60).padStart(2, '0');
    const same = (a, b) => a.getTime() === b.getTime();
    function shown() {
      const out = [];
      if (view === 'week') for (let i = 0; i < 5; i++) { const d = new Date(wk); d.setDate(d.getDate() + i); out.push(d); }
      else { const d = new Date(wk); d.setDate(d.getDate() + dayIdx); out.push(d); }
      return out;
    }
    function render() {
      closeCard(false);
      const ds = shown();
      w.style.setProperty('--n', ds.length);
      const fri = new Date(wk); fri.setDate(fri.getDate() + 4);
      title.textContent = view === 'week' ? (wk.getMonth() === fri.getMonth() ? wk.getDate() : fmtM.format(wk)) + ' t/m ' + fmtM.format(fri) + ' ' + fri.getFullYear() : fmtL.format(ds[0]);
      w.querySelectorAll('.kwk__seg button').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.v === view)));
      w.querySelector('[data-d="-1"]').setAttribute('aria-label', view === 'week' ? 'Vorige week' : 'Vorige dag');
      w.querySelector('[data-d="1"]').setAttribute('aria-label', view === 'week' ? 'Volgende week' : 'Volgende dag');
      // kopregel: in dagweergave zijn de dagen knoppen
      let h = '<div></div>';
      for (let i = 0; i < 5; i++) {
        const d = new Date(wk); d.setDate(d.getDate() + i);
        const p = fmtD.formatToParts(d), wd = p.find(x => x.type === 'weekday').value, dn = p.find(x => x.type === 'day').value;
        const t = same(d, today) ? ' is-today' : '';
        if (view === 'week') h += '<div class="kwk__dh' + t + '">' + wd + ' <b>' + dn + '</b></div>';
        else if (i === 0) h += '<div class="kwk__dh" style="display:flex;gap:2px;border-left:0">' +
          [0, 1, 2, 3, 4].map(j => { const e = new Date(wk); e.setDate(e.getDate() + j); const q = fmtD.formatToParts(e); return '<button type="button" data-day="' + j + '" aria-pressed="' + (j === dayIdx) + '" aria-label="' + fmtL.format(e) + '">' + q[0].value + ' <b>' + q[2].value + '</b></button>'; }).join('') + '</div>';
      }
      days.innerHTML = h;
      days.style.gridTemplateColumns = view === 'week' ? '' : '34px 1fr';
      let g = '<div class="kwk__hours">';
      for (let i = START + 1; i < END; i++) g += '<span style="top:' + (i - START) * HH + 'px">' + i + ':00</span>';
      g += '</div>';
      ds.forEach(d => {
        g += '<div class="kwk__col' + (same(d, today) ? ' is-today' : '') + '" data-date="' + d.getTime() + '">';
        events(d).forEach(e => {
          const top = (e.start - START * 60) / 60 * HH, hgt = e.dur / 60 * HH - 2;
          const c = cancelled.has(e.id);
          g += '<button type="button" class="kwk__ev kwk__ev--' + e.type + (c ? ' is-cancel' : '') + '" data-id="' + e.id + '" aria-haspopup="dialog" aria-expanded="false" style="top:' + top + 'px;height:' + hgt + 'px" aria-label="' + TYPE[e.type] + ', ' + e.who + ', ' + fmtL.format(d) + ' ' + hm(e.start) + ' tot ' + hm(e.start + e.dur) + (c ? ', geannuleerd' : '') + '">' +
            '<b>' + e.who + '</b>' + (hgt > 30 ? '<span>' + hm(e.start) + ' · ' + TYPE[e.type] + '</span>' : '') + '</button>';
        });
        g += '</div>';
      });
      grid.innerHTML = g;
      nowLine();
    }
    function nowLine() {
      grid.querySelectorAll('.kwk__now').forEach(n => n.remove());
      const now = new Date(), mins = now.getHours() * 60 + now.getMinutes();
      if (mins < START * 60 || mins > END * 60) return;
      const col = grid.querySelector('.kwk__col.is-today'); if (!col) return;
      const n = document.createElement('div'); n.className = 'kwk__now'; n.setAttribute('aria-hidden', 'true');
      n.style.top = (mins - START * 60) / 60 * HH + 'px'; col.appendChild(n);
    }
    let cur = null;
    function find(id) { const d = new Date(+grid.querySelector('[data-id="' + id + '"]').closest('.kwk__col').dataset.date); return events(d).find(e => e.id === id); }
    function openCard(btn) {
      const e = find(btn.dataset.id); cur = { e, btn };
      grid.querySelectorAll('.kwk__ev').forEach(b => b.setAttribute('aria-expanded', String(b === btn)));
      const c = cancelled.has(e.id);
      card.querySelector('.kwk__ct').textContent = TYPE[e.type] + (e.type === 'groep' ? '' : ': ' + e.who) + (c ? ' (geannuleerd)' : '');
      card.querySelector('.kwk__cm').textContent = fmtL.format(e.date) + ', ' + hm(e.start) + ' tot ' + hm(e.start + e.dur) + ' · ' + e.by + ' · ' + e.room + (e.type === 'groep' ? ' · 6 van 8 plekken bezet' : '');
      card.querySelector('.kwk__cancel').disabled = c;
      card.hidden = false; card.querySelector('.kwk__ct').focus();
    }
    function closeCard(focus) {
      if (card.hidden) return;
      card.hidden = true;
      grid.querySelectorAll('.kwk__ev').forEach(b => b.setAttribute('aria-expanded', 'false'));
      if (focus !== false && cur) { const b = grid.querySelector('[data-id="' + cur.e.id + '"]'); if (b) b.focus(); }
    }
    grid.addEventListener('click', e => { const b = e.target.closest('.kwk__ev'); if (b) openCard(b); });
    card.querySelector('.kwk__close').addEventListener('click', () => closeCard());
    card.querySelector('.kwk__cancel').addEventListener('click', () => {
      cancelled.add(cur.e.id); const id = cur.e.id, t = hm(cur.e.start);
      render(); const b = grid.querySelector('[data-id="' + id + '"]'); if (b) b.focus();
      sr.textContent = 'Afspraak van ' + t + ' geannuleerd';
    });
    w.addEventListener('keydown', e => { if (e.key === 'Escape' && !card.hidden) { e.preventDefault(); closeCard(); } });
    w.querySelectorAll('.kwk__nav').forEach(b => b.addEventListener('click', () => {
      const d = +b.dataset.d;
      if (view === 'week') wk.setDate(wk.getDate() + 7 * d);
      else { dayIdx += d; if (dayIdx < 0) { dayIdx = 4; wk.setDate(wk.getDate() - 7); } if (dayIdx > 4) { dayIdx = 0; wk.setDate(wk.getDate() + 7); } }
      render();
    }));
    w.querySelector('.kwk__today').addEventListener('click', () => { wk = monday(today); dayIdx = Math.min(4, (today.getDay() + 6) % 7); render(); scrollNow(); });
    w.querySelector('.kwk__seg').addEventListener('click', e => { const b = e.target.closest('button'); if (!b || b.dataset.v === view) return; view = b.dataset.v; render(); b.focus(); });
    days.addEventListener('click', e => { const b = e.target.closest('[data-day]'); if (!b) return; dayIdx = +b.dataset.day; render(); const n = days.querySelector('[data-day="' + dayIdx + '"]'); if (n) n.focus(); });
    function scrollNow() { const h = new Date().getHours(); sc.scrollTop = Math.max(0, (Math.min(Math.max(h, 8), 16) - START - 1) * HH); }
    render(); scrollNow();
    setInterval(nowLine, 60000);
}
init(document.querySelector('.jouw-container'));

Meer uit cijfers & grafieken

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →