1

javascript（jqueryを使用）を使用して、Webページにカレンダー（現時点では1日1ページ）を生成しようとしています。

カレンダーの予定を論理的に表示し、重ならないようにしたい。幅は、イベントの数などに基づいて調整する必要があります。これは、別の投稿から借りた要件の図です。

http://i.stack.imgur.com/kaMNO.png

私はこの投稿の回答（Dan M）から作業を開始しました->イベントdivを使用したカスタムカレンダー。そして、それは私をかなり遠ざけました。しかし、承認された回答にはいくつかの欠陥があり、簡単に破ることができます。もう一度始めますが、ベストアンサーと同じアプローチを使用して、このjsbin-> http://jsbin.com/agocuz/3/をまとめることができました。コードを見ると、問題は私の14:20イベントにあることがわかります。他の2つのイベントとのみ衝突するため、幅の33％を占めます。ただし、それが衝突するイベントは、他の3つのイベントと衝突します。（頭を傷つけます）。

私はこれに対する良い解決策を本当に見ることができません。これまでのところ、hslaを介して不透明度を使用して、危険なオーバーラップを表示しています。

どんな助けでも大歓迎です。私は必ずしも私のためにソリューションをコーディングしてくれる人を探しているわけではありません。疑似コードのアプローチについて頭を上げてもらうだけでもいいでしょう。

私がリンクした同様の質問を見て、答えが壊れているのを見たい場合は、次のデータを使用してください。

var events = [
  {id: 1, start: 0, end: (3 * 60)},
  {id: 2, start: 0, end: (6.5 * 60)},
  {id: 3, start: 60, end: (15-9) * 60},
  {id: 4, start: 80, end: (13-9) * 60},
  {id: 5, start: (12-9)*60, end: (14-9)*60}, 
 ];
4

1 に答える 1

1

問題は、特定の時間に存在するイベントの数だけをチェックすることです。

また、それらのサイズを確認し、適切な最小サイズを使用する必要があります（以前のオーバーラップのためにサイズが小さい場合-あなたの場合のように）

したがって、に対してチェックする代わりにts.length、そのタイムスロットでのイベントのサイズをチェックする必要があります。

var max = ts.length;
ts.forEach(function(id){
    var evt = EventsById[id];
    max=(evt.numcolumns>max)?evt.numcolumns:max;
  });

if (event.numcolumns <= max) {    
    event.numcolumns = max;
  }

http://jsbin.com/iFUNetE/1/でのデモ

アップデート

このコードを追加しました

 // UPDATE CODE AFTER COMMENT
  // fix numcolumns
  for (m=0; m<MINUTESINDAY; m++) {
    ts = timeslots[m];
    for (e=0; e<ts.length; e++) {
      event = EventsById[ ts[e] ];
      var max = ts.length;
      ts.forEach(function(id){
          var evt = EventsById[id];
          max=(evt.numcolumns>max)?evt.numcolumns:max;
        });

      if (event.numcolumns <= max) {    
        event.numcolumns = max;
      }
    }
  }

コメントで@guioconnorによって特定された問題を解決するため。

http://jsbin.com/fopuxakabunu/1/でのデモ

于 2014-01-11T11:58:49.517 に答える