Team-rooster met beschikbaarheid New

Team as a weekly schedule showing availability per day; today is highlighted automatically. For practices where patients pick a regular therapist.

Fysiotherapie Kralingen · Rotterdam

Wie heeft deze week nog plek?

Plek vrij
Nog 1 plek
Vol
Niet aanwezig

TherapeutMaDiWoDoVr

SVSanne VerbeekSportblessures, knie

3 plekkenVol1 plekAfwezig4 plekken

RORachid OualiRug en nek, manueel

Vol2 plekken5 plekken1 plekAfwezig

EDEva de GrootBekken, zwangerschap

Afwezig1 plekVol3 plekken2 plekken

MJMark JansenOuderen, valpreventie

2 plekken4 plekkenAfwezigVol1 plek

Bijgewerkt vandaag om 08:15. Geen verwijzing nodig.Bel de balie · 010 123 4890

How to use it

Paste the HTML where the page sections should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Team-rooster met beschikbaarheid · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tbs">
  <div class="tbs__in">
    <div class="tbs__head">
      <div><span class="tbs__eye">Fysiotherapie Kralingen · Rotterdam</span>
      <h2 class="tbs__h">Wie heeft deze week nog plek?</h2></div>
      <ul class="tbs__legend"><li><i class="tbs__dot tbs__dot--vrij"></i>Plek vrij</li><li><i class="tbs__dot tbs__dot--weinig"></i>Nog 1 plek</li><li><i class="tbs__dot tbs__dot--vol"></i>Vol</li><li><i class="tbs__dot tbs__dot--af"></i>Niet aanwezig</li></ul>
    </div>
    <div class="tbs__table" role="table" aria-label="Beschikbaarheid deze week">
      <div class="tbs__row tbs__row--head" role="row"><span role="columnheader">Therapeut</span><span role="columnheader" data-day="1">Ma</span><span role="columnheader" data-day="2">Di</span><span role="columnheader" data-day="3">Wo</span><span role="columnheader" data-day="4">Do</span><span role="columnheader" data-day="5">Vr</span></div>
      <div class="tbs__row" role="row"><div class="tbs__who" role="rowheader"><i style="background:#0e6e6e">SV</i><span><b>Sanne Verbeek</b>Sportblessures, knie</span></div><span role="cell" data-day="1" class="tbs__c tbs__c--vrij">3 plekken</span><span role="cell" data-day="2" class="tbs__c tbs__c--vol">Vol</span><span role="cell" data-day="3" class="tbs__c tbs__c--weinig">1 plek</span><span role="cell" data-day="4" class="tbs__c tbs__c--af">Afwezig</span><span role="cell" data-day="5" class="tbs__c tbs__c--vrij">4 plekken</span></div>
      <div class="tbs__row" role="row"><div class="tbs__who" role="rowheader"><i style="background:#3f8f7a">RO</i><span><b>Rachid Ouali</b>Rug en nek, manueel</span></div><span role="cell" data-day="1" class="tbs__c tbs__c--vol">Vol</span><span role="cell" data-day="2" class="tbs__c tbs__c--vrij">2 plekken</span><span role="cell" data-day="3" class="tbs__c tbs__c--vrij">5 plekken</span><span role="cell" data-day="4" class="tbs__c tbs__c--weinig">1 plek</span><span role="cell" data-day="5" class="tbs__c tbs__c--af">Afwezig</span></div>
      <div class="tbs__row" role="row"><div class="tbs__who" role="rowheader"><i style="background:#c0794a">ED</i><span><b>Eva de Groot</b>Bekken, zwangerschap</span></div><span role="cell" data-day="1" class="tbs__c tbs__c--af">Afwezig</span><span role="cell" data-day="2" class="tbs__c tbs__c--weinig">1 plek</span><span role="cell" data-day="3" class="tbs__c tbs__c--vol">Vol</span><span role="cell" data-day="4" class="tbs__c tbs__c--vrij">3 plekken</span><span role="cell" data-day="5" class="tbs__c tbs__c--vrij">2 plekken</span></div>
      <div class="tbs__row" role="row"><div class="tbs__who" role="rowheader"><i style="background:#2c4a63">MJ</i><span><b>Mark Jansen</b>Ouderen, valpreventie</span></div><span role="cell" data-day="1" class="tbs__c tbs__c--vrij">2 plekken</span><span role="cell" data-day="2" class="tbs__c tbs__c--vrij">4 plekken</span><span role="cell" data-day="3" class="tbs__c tbs__c--af">Afwezig</span><span role="cell" data-day="4" class="tbs__c tbs__c--vol">Vol</span><span role="cell" data-day="5" class="tbs__c tbs__c--weinig">1 plek</span></div>
    </div>
    <div class="tbs__foot"><span>Bijgewerkt vandaag om 08:15. Geen verwijzing nodig.</span><a href="tel:+31101234890" class="tbs__btn">Bel de balie · 010 123 4890</a></div>
  </div>
</div>
</div>

/* Team-rooster met beschikbaarheid · NedDev · eigen werk. */
.tbs{background:#eef6f3;color:#12302e;font-family:'Switzer',sans-serif;box-sizing:border-box}
.tbs *{box-sizing:border-box}
.tbs__in{max-width:1180px;margin:0 auto;padding:40px 32px 40px}
.tbs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.tbs__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#0e6e6e}
.tbs__h{font-size:clamp(24px,3vw,36px);font-weight:700;letter-spacing:-.02em;margin:8px 0 0;line-height:1.1}
.tbs__legend{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#3d5654}
.tbs__legend li{display:flex;align-items:center;gap:6px}
.tbs__dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.tbs__dot--vrij,.tbs__c--vrij::before{background:#1aa37a}.tbs__dot--weinig,.tbs__c--weinig::before{background:#e0a526}.tbs__dot--vol,.tbs__c--vol::before{background:#c8553d}.tbs__dot--af,.tbs__c--af::before{background:#b9c7c4}
.tbs__table{background:#fff;border-radius:6px;border:1px solid #d3e4df;overflow:hidden}
.tbs__row{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(5,1fr);align-items:stretch;border-top:1px solid #e3eeea}
.tbs__row--head{border-top:0;background:#12302e;color:#eef6f3;font:500 12px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase}
.tbs__row--head span{padding:11px 14px}
.tbs__who{display:flex;align-items:center;gap:12px;padding:12px 14px}
.tbs__who i{width:38px;height:38px;border-radius:50%;flex:none;color:#fff;font:600 12px 'JetBrains Mono',monospace;font-style:normal;display:flex;align-items:center;justify-content:center}
.tbs__who span{display:flex;flex-direction:column;font-size:12.5px;color:#5a7270}
.tbs__who b{font-size:15px;color:#12302e;font-weight:600}
.tbs__c{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:13.5px;border-left:1px solid #e3eeea}
.tbs__c::before{content:'';width:9px;height:9px;border-radius:50%;flex:none}
.tbs__c--vol,.tbs__c--af{color:#8aa09d}
.tbs__row--head .is-today{background:#0e6e6e;color:#fff}
.tbs__row--head .is-today::after{content:' · vandaag';text-transform:none;letter-spacing:0}
.tbs__c.is-today{background:#e2f4ee;font-weight:600}
.tbs__foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:#3d5654}
.tbs__btn{background:#0e6e6e;color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:11px 18px;border-radius:999px;transition:background .2s}
.tbs__btn:hover{background:#12302e}
.tbs__btn:focus-visible{outline:2px solid #0e6e6e;outline-offset:2px}
@media(max-width:760px){.tbs__in{padding:28px 16px}.tbs__row--head{display:none}
.tbs__row{grid-template-columns:repeat(5,1fr);padding:0 0 10px}
.tbs__who{grid-column:1/-1;padding:12px 12px 8px}
.tbs__c{flex-direction:column;align-items:flex-start;gap:4px;border-left:0;padding:6px 4px 6px 12px;font-size:11px;line-height:1.2}
.tbs__c::before{order:-1}
.tbs__c[data-day]::after{content:attr(data-label);order:-2;font:600 10px 'JetBrains Mono',monospace;color:#12302e;text-transform:uppercase}
.tbs__c.is-today{border-radius:3px}
.tbs__btn{width:100%;text-align:center}}

// Team-rooster met beschikbaarheid · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.tbs');if(!w)return;
var names={1:'Ma',2:'Di',3:'Wo',4:'Do',5:'Vr'};
w.querySelectorAll('.tbs__c').forEach(function(c){c.setAttribute('data-label',names[c.getAttribute('data-day')]);});
var d=new Date().getDay();if(d===0||d===6)d=1;
w.querySelectorAll('[data-day="'+d+'"]').forEach(function(c){c.classList.add('is-today');});
var t=w.querySelector('.tbs__foot span');var n=new Date();if(t&&n.getDay()!==0&&n.getDay()!==6){}else if(t){t.textContent='Rooster voor de komende week. Geen verwijzing nodig.';}
}
init(document.querySelector('.jouw-container'));

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →