I'll get straight to the questions:
1. The described look is supported by the Scheduler control out of the box, and you can see it in the following demo:
The control has a GroupingDirection property, that's set to Horizontal by default. To achieve the desired look you just have to set it to Vertical, as shown in the following screenshot:
2. In the Vertical grouped view the appointments do span across the timeslots horizontally.
3. The demo shows how you can set color to the appointments based on their resource. If you want to further customize individual appointments, you can use the AppointmentCreated event to set a different class to the appointment based on a value from the appointment. Then use CSS to change the appearance. This is demonstrated in the following help article:
4. You can use the following demo as a source of inspiration in achieving your requirement: