Visual Placement Logic

The timetable visually represents your schedule by placing each class in the correct time slot on the grid. Here’s how it does it:

1. Time to Pixels: The calculator converts each class's start and end times into a pixel value. It calculates the number of minutes from the beginning of the school day (e.g., 7:00 AM) to the start of the class. This minute value is then scaled to determine the vertical position (`top`) of the class block.
2. Duration as Height: The duration of the class (end time minus start time) is also converted into minutes and scaled to determine the `height` of the class block.
3. Dynamic Rendering: For each day of the week, the calculator filters the classes that belong to that day and renders them on the grid according to their calculated position and height. This happens instantly every time you add, edit, or remove a class.

Example

Imagine you add a "Math" class on "Monday" from "10:00" to "11:30".

• The timetable starts at 7:00 AM. The time from 7:00 AM to 10:00 AM is 180 minutes. This value is used to calculate the block's starting position from the top of the grid.
• The class duration is 90 minutes (11:30 - 10:00). This value is used to calculate the height of the "Math" block.
• The block is then placed in the "Monday" column at the calculated position and with the calculated height, instantly appearing in the correct slot.