日历事件的可视化.以最大宽度布局事件的算法

问题描述

我需要你的算法帮助(它将在客户端使用 javascript 开发，但没关系，我最感兴趣的是算法本身)布置日历事件，以便每个事件框都有最大宽度.请看下图:

I need your help with an algorithm (it will be developed on client side with javascript, but doesn't really matter, I'm mostly interested in the algorithm itself) laying out calendar events so that each event box has maximum width. Please see the following picture:

Y 轴是时间.因此，如果测试事件"在中午开始(例如)并且没有更多的相交，它会占用整个 100% 的宽度.《每周回顾》与《翻滚的基督教青年会》和《安娜/阿米莉亚》有交集，但后两者没有交集，所以都占满了 50%.Test3、Test4 和 Test5 都相交，因此每个的最大宽度为 33.3%.但是 Test7 是 66%，因为 Test3 是 33% 固定的(见上文)，所以它占用了所有可用空间，即 66%.

Y axis is time. So if "Test event" starts at noon (for example) and nothing more intersects with it, it takes the whole 100% width. "Weekly review" intersects with "Tumbling YMCA" and "Anna/Amelia", but the latter two are not intersecting, so they all fill up 50%. Test3, Test4 and Test5 are all intersecting, so max width is 33.3% for each. But Test7 is 66% since Test3 is 33% fixed (see above) , so it takes all available space , which is 66%.

我需要一个算法来解决这个问题.

I need an algorithm how to lay this out.

提前致谢

推荐答案

1. 想象一个只有左边缘的无限网格.
2. 每个事件都是一个单元格宽，高度和垂直位置根据开始和结束时间固定.
3. 尝试将每个事件放在尽可能靠左的列中，不要与该列中任何较早的事件相交.
4. 然后，当放置每个连接的事件组时，它们的实际宽度将是该组使用的最大列数的 1/n.
5. 您还可以展开最左侧和最右侧的事件以使用剩余空间.

/// Pick the left and right positions of each event, such that there are no overlap.
/// Step 3 in the algorithm.
void LayoutEvents(IEnumerable<Event> events)
{
    var columns = new List<List<Event>>();
    DateTime? lastEventEnding = null;
    foreach (var ev in events.OrderBy(ev => ev.Start).ThenBy(ev => ev.End))
    {
        if (ev.Start >= lastEventEnding)
        {
            PackEvents(columns);
            columns.Clear();
            lastEventEnding = null;
        }
        bool placed = false;
        foreach (var col in columns)
        {
            if (!col.Last().CollidesWith(ev))
            {
                col.Add(ev);
                placed = true;
                break;
            }
        }
        if (!placed)
        {
            columns.Add(new List<Event> { ev });
        }
        if (lastEventEnding == null || ev.End > lastEventEnding.Value)
        {
            lastEventEnding = ev.End;
        }
    }
    if (columns.Count > 0)
    {
        PackEvents(columns);
    }
}

/// Set the left and right positions for each event in the connected group.
/// Step 4 in the algorithm.
void PackEvents(List<List<Event>> columns)
{
    float numColumns = columns.Count;
    int iColumn = 0;
    foreach (var col in columns)
    {
        foreach (var ev in col)
        {
            int colSpan = ExpandEvent(ev, iColumn, columns);
            ev.Left = iColumn / numColumns;
            ev.Right = (iColumn + colSpan) / numColumns;
        }
        iColumn++;
    }
}

/// Checks how many columns the event can expand into, without colliding with
/// other events.
/// Step 5 in the algorithm.
int ExpandEvent(Event ev, int iColumn, List<List<Event>> columns)
{
    int colSpan = 1;
    foreach (var col in columns.Skip(iColumn + 1))
    {
        foreach (var ev1 in col)
        {
            if (ev1.CollidesWith(ev))
            {
                return colSpan;
            }
        }
        colSpan++;
    }
    return colSpan;
}

现在对事件进行排序，而不是假设它们已排序.

Now sorts the events, instead of assuming they is sorted.

Edit2:如果有足够的空间，现在向右展开事件.

Now expands the events to the right, if there are enough space.

这篇关于日历事件的可视化.以最大宽度布局事件的算法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！