(AngularJS + Bootstrap) Resource reservation compo

Question

I am writing a simple AngularJS/Bootstrap/Spring-MVC CRUD application that allows me to manage 3 types of objects: person, room and reservation. Reservation type has a relation to both room and person object both in DB and Java backend.

The simple parts have been made and now I need to know what would be the best approach for creating a graphical calendar-style view showing the reservations.

I can imagine it either as a new AngularJS directive (or maybe just simple ng-repeat with extended controller) or a jQuery script module.
The question though is - what is better performance-wise?

• Should I try to use the HTML5 to draw a canvas on it, or can I simply add 50-150 divs on one page and use those as representations of my entities in the calendar?
• Won't it kill the browser if I have this many divs each floating atop other? Also each of them needs to have listeners and other dynamic events attached to them so pretty heavy stuff, no?

Answer 1

There's an angular UI for this on github. http://angular-ui.github.io/ui-calendar/

I don't recommend putting 50+ divs(div soup) in any file. It would work but it will be very hard to debug and hard to look at down the road or if someone else has to look at it in the future.