School time table in ReactJS

table in edit mode -system checks if all data of school setup --> work hours is provided (starting day of the week is the first day, business on and off days,..) -user provides the table span in days (# of cells per table) -based on this data system draws table -User provide --(table title -table description -table start date) --if expires is activated then user selects table end date and in this case the table will be temporary --"Place class on company day offs" is off by default, day off mark is undeletable if "Place class on company day offs" is activated then day off mark is deletable --user view a list of available classes so he drags the class to be placed in suitable cell and cell can be expanded over one or more cells - -a validation that all days in the added span has at least one or more classes , or day off at least table in view mode when admin user clicks "add table" calendar view opens -days are marked with dates -calendar view can be viewed per (weeks and the week start and end date/ month and month name / year and year number) -calendar view can be printed - allocated classes on it and list of added tables View mode rules: 1-classes are ordered by time, earliest first, user place classes on a cell but classes auto order by class starting time display first 2-If "place classes on school day off" is inactive, then day off won't be included in table repetition 3-If "place classes on school day off" is active, then table will repeat regardless of day of the week is a day off or not 4-one student can't be assigned to 2 overlapped classes, this will show the conflict error