MS Outlookのようなカレンダーを作成するのに必要なヘルプ？

Question

私はユーザーがイベントなどを置くことができるMS Outlookのカレンダーのようなアプリケーションで仕事をしています 私はOutlookのカレンダーのイベントオブジェクトをドラッグしてサイズ変更することができるので、サイズなどに応じてイベントオブジェクトのレイアウトに問題があります。イベントオブジェクトのサイズは自動的に設定されます。

私は自分で書くことができるようにアルゴリズムが必要ですが、いくつかの問題があります。

このスクリーンショットは、動的なイベントオブジェクトの配置を示します。

Answer 1

とレイアウトを維持しますが、矩形パッキングアルゴリズムのために行くが、イベントがWRT時間と日付を並べ替えるだけ水平べきである心に留めておくことができANS

です梱包は、ここにあなた

のために動作します。ここalgo

Answer 2

フレックスを使用しているため、これはあなたの質問に対する直接的な回答ではありませんが、うまくいけば適切なパスを設定します。

FullCalendarの週と日のビューでこれがどのように実装されているかを見てみましょう。 FullCalendarは、あなたが探しているものとまったく同じカレンダーをレンダリングするjQueryプラグインです。

FullCalendarからレンダリングロジックを抽出し、それをFlexでプロジェクトに変換する必要があります。 JavaScriptとActionScriptは非常によく似ていますが、フレックスを一度も使用したことはありません—申し訳ありませんが、私はその分野でさらに役立つことはできません。

FullCalendarのレポはhereです。具体的には、AgendaView.jsのように見えるファイルが最も興味深いです。

Answer 3

私はあなたが一般的にオブジェクトレイアウトアルゴリズムについて質問していると思いますか？

私は、これはNP完全問題であることをかなり確信している：セットを並べ間隔、それぞれが開始と終了としていくつかの列できるだけによって定義されている場合。 - あなたは何か、間隔を持ってグループ

• はクラスターあなたのオブジェクトでを見つける：あなたの最高のショットは、おそらくすべての可能な配置を試していること

  ビーイングNP完全手段、オーバーラップする。各クラスタの

• は
  • はNが（10または15など）が高すぎる場合Nは、停止してちょうど
  • が発生重複オブジェクトを描画クラスタ内
  • オブジェクトの数としますかすべて可能クラスタ内のオブジェクトの（nオブジェクトの場合、n！の可能な組み合わせ、つまり6つのオブジェクト、120の可能な順序）
  • それぞれの順序でオブジェクトをレイアウトします。要素をループして既存の列に配置し、必要に応じて新しい列を開始します。
  • ここで少なくとも列

Answer 4

梱包四角形は、私はそれをやった方法です：

の

1. イベントは、一つの列の日（またはいくつかの他の規則）によって列変数にパケット
2. イベントはさらに限りY軸上で連続交差点が存在するように、列に分離されています。
3. イベントにはX軸の値（0〜1）とXサイズ（0〜1）が割り当てられます。
4. イベントは再帰的に展開され、列のバリヤーまたは他のイベントが、拡張を完了した。

は、基本的にそれは強引ですが、ステップを超えて拡大し、さらに必要はありません多くのイベントがあるので、かなり迅速に動作します3.

var physics = []; 
var step = 0.01; 

var PackEvents = function(columns){ 
    var n = columns.length; 
    for (var i = 0; i < n; i++) { 
     var col = columns[ i ]; 
     for (var j = 0; j < col.length; j++) 
     { 
      var bubble = col[j]; 
      bubble.w = 1/n; 
      bubble.x = i*bubble.w; 
     } 
    } 
}; 

var collidesWith = function(a,b){ 
    return b.y < a.y+a.h && b.y+b.h > a.y; 
}; 

var intersects = function(a,b){ 
    return b.x < a.x+a.w && b.x+b.w > a.x && 
      b.y < a.y+a.h && b.y+b.h > a.y; 
}; 

var getIntersections = function(box){ 
    var i = []; 
    Ext.each(physics,function(b){ 
     if(intersects(box,b) && b.x > box.x) 
      i.push(b); 
    }); 
    return i; 
}; 

var expand = function(box,off,exp){ 
    var newBox = { 
     x:box.x, 
     y:box.y, 
     w:box.w, 
     h:box.h, 
     collision:box.collision, 
     rec:box.rec 
    }; 
    newBox.x += off; 
    newBox.w += exp; 
    var i = getIntersections(newBox); 
    var collision = newBox.x + newBox.w > 1; 
    Ext.each(i,function(n){ 
     collision = collision || expand(n,off+step,step) || n.collision; 
    }); 
    if(!collision){ 
     box.x = newBox.x; 
     box.w = newBox.w; 
     box.rec.x = box.x; 
     box.rec.w = box.w; 
    }else{ 
     box.collision = true; 
    } 
    return collision; 
}; 

Ext.each(columns,function(column){ 
    var lastEventEnding = null; 
    var columns = []; 
    physics = []; 

    Ext.each(column,function(a){ 
     if (lastEventEnding !== null && a.y >= lastEventEnding) { 
      PackEvents(columns); 
      columns = []; 
      lastEventEnding = null; 
     } 
     var placed = false; 
     for (var i = 0; i < columns.length; i++) { 
      var col = columns[ i ]; 
      if (!collidesWith(col[col.length-1], a)) { 
       col.push(a); 
       placed = true; 
       break; 
      } 
     } 
     if (!placed) { 
      columns.push([a]); 
     } 
     if (lastEventEnding === null || a.y+a.h > lastEventEnding) { 
      lastEventEnding = a.y+a.h; 
     } 
    }); 
    if (columns.length > 0) { 
     PackEvents(columns); 
    } 

    Ext.each(column,function(a){ 
     a.box = { 
      x:a.x, 
      y:a.y, 
      w:a.w, 
      h:a.h, 
      collision:false, 
      rec:a 
     }; 
     physics.push(a.box); 
    }); 

    while(true){ 
     var box = null; 
     for(i = 0; i < physics.length; i++){ 
      if(!physics[i].collision){ 
       box = physics[i]; 
       break; 
      } 
     } 
     if(box === null) 
      break; 
     expand(box,0,step); 
    } 

}); 

結果：http://imageshack.com/a/img913/9525/NbIqWK.jpg