Benutzerdefinierter Kalender mit Ereignisbereichen

Ich arbeite an einem Ereignissystem, das im Grunde genommen ein Container mit einer Höhe von 720 Pixel ist, wobei jedes Pixel eine Minute von 9:00 bis 21:00 Uhr darstellt und eine Breite von 620 Pixel hat (10 Pixel Abstand von links und rechts).

Die natürliche Voraussetzung für das Kalendersystem ist, dass:

Die Objekte sollten so angeordnet sein, dass sie sich optisch nicht überlappen.Wenn sich ein Ereignis in einem Zeitfenster befindet, beträgt seine Breite 600pxJedes kollidierende Ereignis muss dieselbe Breite haben wie jedes andere Ereignis, bei dem es kollidiert.Ein Ereignis sollte die maximal mögliche Breite verwenden, während die erste Einschränkung weiterhin eingehalten wird.

Die Eingabe wird ein Array wie folgt sein:

<code>[
 {id : 1, start : 30, end : 150},  // an event from 9:30am to 11:30am
 {id : 2, start : 540, end : 600}, // an event from 6pm to 7pm
 {id : 3, start : 560, end : 620}, // an event from 6:20pm to 7:20pm
 {id : 4, start : 610, end : 670} // an event from 7:10pm to 8:10pm
]
</code>

Ich habe das benötigte Layout erstellt, bin aber mit dem JavaScript-Teil festgefahren :( Dies ist, was ich bisher habe:

<code>var Calendar = function() {

   var layOutDay = function(events) {
     var eventsLength = events.length;

     if (! eventsLength) return false;

     // sort events
     events.sort(function(a, b){return a.start - b.start;});

     for (var i = 0; i < eventsLength; i++) {
         // not sure what is next
     }         

   };

   return {
       layOutDay : layOutDay,
   }

}();
</code>

Erstellen Sie Divs und positionieren Sie sie gemäß den obigen Anforderungen.

Bitte sehen Sie die JSBin-Demo.

Jede Hilfe wird sehr geschätzt.

Antworten auf die Frage(6)

Ihre Antwort auf die Frage