Custom calendar with event divs

Question

I am working on an event system which is basically a container with 720px height with each pixel representing one minute from 9AM to 9PM and has width of 620px (10px padding

Answer 1

The keypoint is to count all the Collision from your appointments. There is a pretty simple algorithm to do so:

• sort the appointment array appointments according to start-date and breaking ties with end-date.
• maintain an array active with all active appointments, which is empty in the beginning
• maintain a value collision for each appointment (since you already have objects, you could store it as another property) [{id : 1, start : 30, end : 150, collisions : 0},...]

iterate through appointments with the following steps:

1. shift the first item (i) from appointments
2. compare start-date from i with enddates from all items j in active - remove all items where j.enddate < i.startdate
3. update collisions from all remaining j (+1 for each)
4. update collision of i ( i.collision = active.length)
5. pop i into array active

repeat these steps for all items of appointments.

Example:

(beware, pseudo-code) :

var unsorted = [7,9],[2,8],[1,3],[2,5],[10,12]
// var appointments = sort(unsorted);
var appointments = [1,3],[2,5],[2,8],[7,9],[10,12]

// now for all items of appoitments:
for (var x = 0; x

If you collect the items removed from active, you get an array, sorted by end-dates before startdates, which you can use for displaying the divs.

Now, try out if you can get the code to make it work and write a comment if you need further help.