how to achieve Resource planning UI with drag-and-drop and resize support

Hi, currently I am doing PoC for resource planning with Vaadin, for example, assign class room to course. In this Scenario, different courses can be assigned into the same class room, but at different time periods. We would like to have one UI to show the classroom planning

  1. at X-axis: show time
  2. at Y-axis: show different class rooms
  3. each cell is the course assignment
  4. drag and drop course assignment from one class room to another class room, but keep the time period same. Therefore it is possible that the time period of different courses assigned to the same class room are overlapping. This is allowed.
  5. resize course assignment to decrease/increase the time period using mouse.

We have looked at the following UI:

  1. Gantt addon and Gantt diagram addon
    this doesnot match our requirements as we cannot show different courses assigned to the same class room at the same row.

  2. drag-and-drop layout addon
    it seems that it doesnot match our requirement as well when we are using drag-and-drop gridlayout, which doesn’t allow two compoents occupy the same cell.

  3. Canledar addon
    This UI shows date at X-axis, time at Y-axis. We cannot show time at X-axis.

Could someone advise me how to achieve this using Vaadin? Many thanks in advance.



Sorry to dig out this old post, but we have same need and do not find any solution.

Did you find something ?

There was a “time-line” addon that could have been a start, but it’s not available anymore in the add-on section.

Best would be to have a component similar to the one in smartgwt :
Or event best, to have it included in actual calendar component.