Creating a School Timetable

Tutorial » Creating a School Timetable

This tutorial will show you how to create a school timetable using jQuery EasyUI. We will build two tables: school subjects on the left and timetable on the right. You could drag school subject and drop it on a timetable cell. The school subject is a <div class="item"> element while timetable cell is a <td class="drop"> element.

Displaying school subjects

Displaying timetable

Drag the school subject on the left

Drop the school subject on timetable cell

As you can see the code above, when users drag the school subject on the left and drop it to the timetable cell, the onDrop callback function will be called. We clone the source element dragged from left and append it on timetable cell. When dragging school subject from timetable cell to another cell, simply move it.

Download the EasyUI example:

easyui-timetable-demo.zip