Color-Coded School Timetable Web App – Google Sheets

B16 publishes your institution's timetables as one link. A student opens it, picks their class from a dropdown and sees that class's schedule. Behind it, each class is simply a sheet in your workbook, so the timetable that staff already maintain in Google Sheets becomes the thing students actually read.

Adding a class is adding a sheet

Copy the layout into a new tab, name it 6A, and 6A is in the class dropdown on the next refresh. Nothing is registered in code and nothing is listed anywhere else. The one tab that stays out of the dropdown is the Colors sheet, because it is configuration rather than a class.

Colour coding, controlled from a sheet

The Colors sheet maps a subject name to a colour code. Put English against one shade and Urdu against another, and every cell holding that subject picks up the colour across the whole timetable. Change the code in that sheet and the timetable re-colours — no CSS, no hunting for cells. The one rule: the subject spelling in the Colors sheet must match the spelling in the timetable exactly.

Editing the grid itself

The day and period labels are text you change. Lecture times are cells you change. If a class runs eight lectures rather than seven, you copy the row and set its time — the extra lecture appears on the web app, and deleting it removes it again. The timetable follows the sheet as it is edited.

Getting it to people

Each class timetable prints, and there is an Excel download if somebody needs the file. Copy the sheet, deploy as a web app, and send the link to students and staff.