6

カスタム カレンダーの作業中に、他の時間帯と重複する時間帯を見つける方法がわかりません。

タイム スロットは 0 から 720 までです (各ピクセルが分を表す午前 9 時から午後 9 時まで)。

var events = [
 {id : 1, start : 0, end : 40},  // an event from 9:00am to 9:40am
 {id : 2, start : 30, end : 150},  // an event from 9:30am to 11:30am
 {id : 3, start : 20, end : 180},  // an event from 9:20am to 12:00am
 {id : 4, start : 200, end : 230},  // an event from 12:20pm to 12:30pm
 {id : 5, start : 540, end : 600}, // an event from 6pm to 7pm
 {id : 6, start : 560, end : 620} // an event from 6:20pm to 7:20pm
];

各時間枠は1 時間です。たとえば、9 時から 10 時、10 時から 11 時、11 時から 12 時などです。

上記の例では、3 つのイベント (id: 1,2,3) が9-10 開始時刻で重複しています: 9:00、9:30および9:20。また、重複する他のイベントは、開始時刻と開始時刻の int タイム スロット6( id :7 5, 6)です。ID の予定には、時間帯 からまでの重複する予定はありません。66:20 4121

重複するすべてのイベント ID と特定のタイム スロットのイベント数を取得する方法を探しています。これは期待される出力です。

[
 {id:1, eventCount: 3},
 {id:2, eventCount: 3},
 {id:3, eventCount: 3},
 {id:5, eventCount: 2},
 {id:6, eventCount: 2}
]

ID (1 から 3) には3、時間帯 to のイベントと時間帯toのイベント9が10あります。267

時間数を実際の時間に変換するために、次の式を作成しました。

var start_time = new Date(0, 0, 0, Math.abs(events[i].start / 60) + 9, Math.abs(events[i].start % 60)).toLocaleTimeString(),
var end_time = new Date(0, 0, 0, Math.abs(events[i].end / 60) + 9, Math.abs(events[i].end % 60)).toLocaleTimeString();

これは私がこれまでに持っているものです:

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

   for (var i = 0, l = events.length; i < l; i++) {
      // cant figure out what should be next
   }
}

必要に応じてデモ。

4

3 に答える 3

6

私のjquery-week-calendar commitから、これは私がそれを行う方法です:

    _groupOverlappingEventElements: function($weekDay) {
        var $events = $weekDay.find('.wc-cal-event:visible');
        var complexEvents = jQuery.map($events, function (element, index) {
            var $event = $(element);
            var position = $event.position();
            var height = $event.height();
            var calEvent = $event.data('calEvent');
            var complexEvent = {
                'event': $event,
                'calEvent': calEvent,
                'top': position.top,
                'bottom': position.top + height
            };
            return complexEvent;
        }).sort(function (a, b) {
            var result = a.top - b.top;
            if (result) {
                return result;
            }
            return a.bottom - b.bottom;
        });
        var groups = new Array();
        var currentGroup;
        var lastBottom = -1;
        jQuery.each(complexEvents, function (index, element) {
            var complexEvent = element;
            var $event = complexEvent.event;
            var top = complexEvent.top;
            var bottom = complexEvent.bottom;
            if (!currentGroup || lastBottom < top) {
                currentGroup = new Array();
                groups.push(currentGroup);
            }
            currentGroup.push($event);
            lastBottom = Math.max(lastBottom, bottom);
        });
        return groups;
    }

コンポーネント固有のノイズが少しありますが、ロジックは次のようになります。

  • イベントを昇順で並べ替える
  • イベントを末尾の昇順で並べ替える
  • 並べ替えられたイベントを反復処理し、前のイベントの開始/終了を確認します (イベント プロパティ自体ではなく、位置によって行われます - デザインが重複する可能性があるためですが、イベントはそうではありません ... 例: 境界線 2px を作成し、イベント開始/終了時間が重複していない場合、重複または「接触」する可能性があります)
  • 各重複グループ ( ) は-arraycurrentGroup内の新しい配列ですgroups

すっごく...あなたのコードはこれに似ているかもしれません(ところで、実際のインスタンスで作業する必要はありませんdate)

events.sort(function (a, b) {
    var result = a.start - b.start;
    if (result) {
        return result;
    }
    return a.end - b.end;
});
var groups = new Array();
var currentGroup;
var lastEnd = -1;
jQuery.each(events, function (index, element) {
    var event = element;
    var start = event.start;
    var end = event.end;
    if (!currentGroup || lastEnd < start) {
        currentGroup = new Array();
        groups.push(currentGroup);
    }
    currentGroup.push(event);
    lastEnd = Math.max(lastEnd, end);
});
return groups;

すっごく...あなたは自分の問題に自分のエネルギーを押し込むつもりはありません...まあ

var output = new Array();
jQuery.each(groups, function (index, element) {
    var group = element;
    if (group.length <= 1) {
        return;
    }
    jQuery.each(group, function (index, element) {
        var event = element;
        var foo = {
            'id': event.id,
            'eventCount': group.length
        };
        output.push(foo);
    });
});
于 2012-05-14T07:16:34.827 に答える
4

私にとっては、開始イベントと終了イベントごとにタイムスタンプを使用する方が簡単です。そうすれば、それらを直接操作したり、日付オブジェクトに変更したりできます。値を取得するには、開始と終了ごとに日付オブジェクトを作成してから、次のようにします。

var a.start = startDate.getTime();
var a.end = endDate.getTime();

オーバーラップの場合:

if (a.start <= b.start && a.end > b.start ||
    a.start < b.end && a.end >= b.end) {
    // a overlaps b
}

必要に応じて、それらを日付オブジェクトのままにしておくことができます。上記は同様に機能します。

編集

これが実際の例です：

2012 年 5 月 15 日の名目上の日付を想定すると、events 配列は次のようになります。

// Use iso8601 like datestring to make a local date object
function getDateObj(s) {
  var bits = s.split(/[- :]/);
  var date = new Date(bits[0], bits[1] - 1, bits[2]);
  date.setHours(bits[3], bits[4], 0);
  return date;
}

var events = [
  {id: 1, start: getDateObj('2012-05-15 09:00'), end: getDateObj('2012-05-15 09:30')}, 
  {id: 2, start: getDateObj('2012-05-15 09:30'), end: getDateObj('2012-05-15 11:30')}, 
  {id: 3, start: getDateObj('2012-05-15 09:20'), end: getDateObj('2012-05-15 12:00')}, 
  {id: 4, start: getDateObj('2012-05-15 12:20'), end: getDateObj('2012-05-15 12:30')}, 
  {id: 5, start: getDateObj('2012-05-15 18:00'), end: getDateObj('2012-05-15 19:00')}, 
  {id: 6, start: getDateObj('2012-05-15 18:20'), end: getDateObj('2012-05-15 19:20')}
];

function getOverlappingEvents(eventArray) {
  var result = [];
  var a, b;

  // Sort the event array on start time
  eventArray.sort(function(a, b) {
      return a.start - b.start;
    });

  // Get overlapping events
  for (var i=0, iLen=eventArray.length - 1; i<iLen; i++) {
    a = eventArray[i];
    b = eventArray[i + 1];

    if ((a.start <= b.start && a.end > b.start) ||
        (a.start < b.end && a.end >= b.end) ) {
       result.push([a.id, b.id]);
    }
  }
  return result;
}

// Run it    
alert(getOverlappingEvents(events).join('\n')); // 1,3 2,3 5,6
于 2012-05-14T07:17:05.840 に答える
1

これがあなたが望むことをするコードです。他の人が言ったように、おそらく日付オブジェクトを保存する方が良いでしょうが、それは別の問題です。

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

    var results = [];
    for (var i = 0, l = events.length; i < l; i++) {
        var oEvent = events[i];
        var nOverlaps = 0;
        for (var j = 0; j < l; j++) {
            var oCompareEvent = events[j];
            if (oCompareEvent.start <= oEvent.end && oCompareEvent.end > oEvent.start || oCompareEvent.end <= oEvent.start && oCompareEvent.start > oEvent.end) {
                nOverlaps++;
            }
        }
        if (nOverlaps > 1) {
            results.push({
                id: oEvent.id,
                eventCount: nOverlaps,
                toString: function () {
                    return "[id:" + this.id + ", events:" + this.eventCount + "]"
                }
            });
        }

    }
    return results;
}
于 2012-05-14T07:48:07.783 に答える