I would like to render a calendar of timeslots. I get my slots like this from the backend.

8: {weekDay: '1', address: 7, startTime: '14:00', endTime: '14:30'}
9: {weekDay: '1', address: 1, startTime: '14:30', endTime: '15:00'}
10: {weekDay: '1', address: 1, startTime: '15:00', endTime: '15:30'}
11: {weekDay: '1', address: 1, startTime: '15:30', endTime: '16:00'}
12: {weekDay: '1', address: 1, startTime: '16:00', endTime: '16:30'}
13: {weekDay: '1', address: 1, startTime: '16:30', endTime: '17:00'}
14: {weekDay: '1', address: 1, startTime: '17:00', endTime: '17:30'}
15: {weekDay: '1', address: 1, startTime: '17:30', endTime: '18:00'}
16: {weekDay: '2', address: 1, startTime: '08:30', endTime: '09:00'}
17: {weekDay: '2', address: 1, startTime: '09:00', endTime: '09:30'}
18: {weekDay: '2', address: 1, startTime: '09:30', endTime: '10:00'}
19: {weekDay: '2', address: 1, startTime: '10:00', endTime: '10:30'}
20: {weekDay: '2', address: 1, startTime: '10:30', endTime: '11:00'}
21: {weekDay: '2', address: 1, startTime: '11:00', endTime: '11:30'}
22: {weekDay: '2', address: 1, startTime: '11:30', endTime: '12:00'}
23: {weekDay: '2', address: 1, startTime: '12:00', endTime: '12:30'}
24: {weekDay: '2', address: 1, startTime: '12:30', endTime: '13:00'}
25: {weekDay: '2', address: 1, startTime: '13:00', endTime: '13:30'}
26: {weekDay: '2', address: 1, startTime: '13:30', endTime: '14:00'}

The idea would be to have a result such as shown in jQuery Calendar time selection suggestion

But I don't see how to append my element to have them sorted in columns by day.

I'd like to have all the slots for monday (weekday = 1) on the same column and all the slots for a same start time at the same line. The constraint is that the during time of a slot might be changing from one to another. E.G.

10:30-11:00 11:00-11:40 11:40-11h50

Could you guide me on how to do it ?

Thank you