ideas or best and easiest way to make timetable for my school management system

I am a teacher programming a school management system for my school and I created CRUD for all tables with their relationship

#users [name-email-api_token-password]
#roles [name-label]
#permissions. [name-label]
#students [name-academic_id]
#sections [name]
#subjects [name]
#halls [name]
#Days [name - order] five days a week. [1-2-3-4-5-6]
#periods [name - order - start - end ] seven periods a day.[1-2-3-4-5-6-7]

Now I want to make a timetable

I’m thinking to make a table called “timetable”

#timetable with fields [ day_order - period_order - user_id -hall_id]

And then create components with vuejs as follows:

1- [cell] component {has its own day_order and period_order based on its position in timetable component. The cell component will get the user_id from teachers droplist and make ajax call to larval with [user_id,day_order, period_order ] -fetch the result -And display the subject name and the hall name in the cell If there is no result for query then the cell will be empty

2- [timetable] component displays cell components in a table

|| teachers droplist ||
 —————————————————————


       |Period 1            | period 2. |. period 3  |  period 4   | ..etc             
============================================================================================
 Sun   |   cell component   |   cell 1.2   |    cell 1.3   |    cell  1.4  |   cell 1.5    |
============================================================================================
 Mon   |   cell component   |   E-3 H102   |    cell       |    cell     |   cell     |
===================================================================================
 Tues   |   cell component  |   cell       |    cell       |    cell     |   cell     |
===================================================================================
 Wed   |   cell component   |   cell       |    E-3 H103.  |    cell     |   cell     |
===================================================================================
 Thur   |   cell component  |   cell       |    cell       |    cell     |   cell     |
===================================================================================

is this a good idea or there is a simpler and easier way to do it ?