javascript - 从 1 开始计算新事件

Question

经过努力(我在​​js方面并不先进)，我有了一些纯js的日历。 到目前为止，我很自豪能拥有它……但不知怎的，我被困了好几天。

这是我的日历: https://jsfiddle.net/ck3nsemz/

我遇到的问题是，我的日历事件最终得到排序，多日事件显示在相同的高度，因此我填充 days[x]["grid"] 以保留变量。

如果你看我的日历，你会发现“聚会”事件值 days[x][“grid”] 被保留，但现在"new"事件计数到 grid:3 但我想要 grid:1 。

希望您能理解我的问题。 "new"事件应该有 grid:1!

.grid1, grid2, grid2 {
  position:relative;
}
.grid1 {
  top:0px;
}
.grid2 {
  top:20px;
}...

Answer 1

对于初学者来说，关于填充对象的友好建议。您可以直接定义对象，而不是使用子数组。例如:

days[0] = {
    start: "9-3",
    title: "Fritz",
    dur: 1
};

或者更进一步，定义一个对象并从那里创建数组

function Event(start,title, duration){
    this.start=start;
    this.title = title;
    this.dur = duration;
}

var days = [
    new Event('9-3','Fritz', 1),
    new Event('9-5', 'huhu', 3),
    new Event('9-5', 'dieter', 1),
    new Event('9-7', 'party', 8),
    new Event('9-8', 'new', 2),       
];

这使得初始化更加简洁，有趣的是，在不更改任何其他内容的情况下，您当前的代码在使用上面的对象时仍然可以工作(因为 javascript 会将键名转换为对象上的属性名)

进一步的一步是让对象定义解析日期并确定结束。 (在示例中就是这样做的)。并缓冲所需的任何其他值。

回到当前的问题。必须确定所使用的网格，而不是立即添加日期(事件)。一种方法是获取首先分配网格的所有日期。要做到这一点而不重置范围之外的日期，最简单的方法是首先确定当天的所有事件，然后获取已分配网格的所有事件。 javascript 的过滤函数(用于数组)可以派上用场:

            var events = days.filter(function(e){ return e.start <= d && e.end >= d;}); //get all events for this day               
            if(events.length){
                var grid = 1,
                    gridstaken = events.filter(function(e){return e.grid}), //get all the taken grids
                    getfreegrid = gridstaken.length ?
                    function(){while(gridstaken.some(function(e){return e.grid===grid;})){grid++;}return grid++;} // if there are grids already taken, create a check function
                        :  function(){return grid++;}; //otherwise, simply increase grid
                //etc

FIDDLE/FIDDLE2

对于第一个过滤器，使用了一个 end 属性，该属性已添加到示例代码中，但可以通过与 start 进行比较并增加起始值来在原始代码中获取该属性。在示例 fiddle 中，我冒昧地将大量逻辑移至 Event 对象，以展示这种方法的可能性，但您可以将所需的部分剥离到当前代码中。 第二个过滤器创建具有指定网格的事件数组。最后，getfreegrid 会增加当前网格索引(只要它已被使用)。做了一个小补充，如果没有分配的网格，则跳过搜索，但这也是可选的。

编辑 按照原始示例，上面的代码仅设置“grid”的文本，但不进行任何定位。对于包括定位的示例:click here这个快速示例使用相对位置的封装 div，将 title 类的 css 设置为绝对，并使用添加中的 style.top 来设置位置。也许不是最CSS的方式，但它可以达到预期的目的。

作为一个小旁注，当月份重叠时，上面的代码只有在已经添加了上个月的情况下才有效。