Home/Tools/Timetable Maker

Timetable Maker

Build your weekly class timetable. Click any cell to type the subject. Colour-code subjects and print when ready.

Advertisement

Colour codes (click a cell then pick a colour):

Advertisement

Related tools

const DAYS=['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']; const COLORS=['#FFD166','#1D9E75','#378ADD','#D85A30','#7F77DD','#E24B4A','#EF9F27','#5DCAA5','#85B7EB','transparent']; let selectedColor='transparent', activeCell=null; function buildTable(){ const periods=+document.getElementById('periods-sel').value; const tt=document.getElementById('tt'); let html='Period'+DAYS.map(d=>`${d}`).join('')+''; for(let p=1;p<=periods;p++){ html+=`Period ${p}
${8+p-1}:00`; DAYS.forEach(d=>{ const key=`${d}-${p}`; const saved=localStorage.getItem('tt-'+key)||''; const color=localStorage.getItem('tt-color-'+key)||'transparent'; html+=`
`; }); html+=''; } tt.innerHTML=html; } function saveCell(key,val){localStorage.setItem('tt-'+key,val);} function setActive(key){activeCell=key;} function setColor(color){ selectedColor=color; document.querySelectorAll('.c-opt').forEach(b=>b.classList.remove('sel')); event.target.classList.add('sel'); if(activeCell){ document.getElementById('bg-'+activeCell).style.background=color; localStorage.setItem('tt-color-'+activeCell,color); } } function clearAll(){if(confirm('Clear the entire timetable?')){Object.keys(localStorage).filter(k=>k.startsWith('tt-')).forEach(k=>localStorage.removeItem(k));buildTable();}} document.addEventListener('DOMContentLoaded',()=>{ buildTable(); document.getElementById('color-opts').innerHTML=COLORS.map((c,i)=> `
` ).join(''); document.getElementById('related-grid').innerHTML=TOOLS.filter(t=>t.category==='teacher'&&t.slug!=='timetable-maker').slice(0,4).map(buildToolCard).join(''); });