Question

对于我的网站，我需要一个日视图日历视图，我希望看起来像iOS日历。在GitHub上我发现了hcal.js，它确实如此，但是我需要一些缺少的功能。我对现有代码进行了一些更改，并设法使大部分代码工作，除了在约会与另一个约会碰撞时将约会放在一起。

链接到原始hcal来源：GitHub hcal.js
在JS Bin

上链接到我的版本

我下面的功能是为了检查碰撞预约和更改约会的宽度。它只是检查时间并确定是否存在碰撞。一个约会碰撞的所有约会被推入一个数组，然后用于计算约会的宽度。因此，假设约会与其他2个约会碰撞，那么宽度将是100％/ 3 = 33,333％。现在我正在尝试为每个约会计算正确的保证金，因此相互碰撞的约会彼此相邻而不是相互叠加。

一个约会项目包含以下内容：一个以小时和分钟为开头时间的数组，一个以小时和分钟为结束时间的数组，一个标题字符串，一个位置字符串，一个描述字符串，颜色ID，一个表其中包含当前项目与之碰撞的项目（按开始时间排序，包括自身）和唯一标识符。

function formatHcalAppointments() {
    for (var i = 0; i < $.fn.items.length; i++) {
        $.fn.items[i][6] = [];

        for (var k = 0; k < $.fn.items.length; k++) {
            var iTimeStart = $.fn.items[i][0][0] + ($.fn.items[i][0][1]/100),
                iTimeEnd = $.fn.items[i][1][0] + ($.fn.items[i][1][1]/100),
                kTimeStart = $.fn.items[k][0][0] + ($.fn.items[k][0][1]/100),
                kTimeEnd = $.fn.items[k][1][0] + ($.fn.items[k][1][1]/100);

            if (((iTimeStart >= kTimeStart) && (iTimeStart <= kTimeEnd)) || ((iTimeEnd >= kTimeStart) && (iTimeStart <= kTimeEnd))) {
                $.fn.items[i][6].push(k);
            }
        }
    }

    for (var i = 0; i < $.fn.items.length; i++) {
        var $item = $('.hcal-item-' + $.fn.items[i][7]);

        var width = 100 - ((75 / window.innerWidth) * 100);

        var count = $.fn.items[i][6].length;
        var length = (count == 0) ? 1 : count;

        for (var k in $.fn.items[i][6]) {
            var n = $.fn.items[i][6][k];

            if ($.fn.items[n][6].length > count) {
                length = $.fn.items[n][6].length;
            }
        }

        $item.css({
            'width': (width/length) + '%',
            'margin-right': '0%'
        });
    }
}

我知道这不是太多信息，但我真的不知道如何更具体。我想要朝着正确的方向努力，我已经用这种方式搞得太久了，没有任何结果。

干杯。

iOS日视图日历

0 个答案: