Question

经过努力工作（我在js中没有进步）我有一些小的纯js日历。到目前为止，我已经知道了......但有些人认为我被困了几天。

我遇到的问题是，我的日历事件最终得到的排序是多日事件在同一个高度显示，因此我填写天[x] [＆＃34; grid＆＃34;]以保留var。

如果你看我的日历，你会看到＆＃34;派对＆＃34;事件值天[x] [＆＃34;网格＆＃34;]保持良好但现在是＆＃34; new＆＃34;事件正在计算到网格：3但我想要网格：1为它。

我希望你理解我的问题。＆＃34;新＆＃34;事件应该有网格：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会将keyname转换为对象上的属性名）

更进一步的是让对象定义解析日期并确定结束。（在示例中做到了）。并缓冲所需的任何其他值。

回到手头的问题。不必立即添加日期（事件），而是必须确定使用过的网格。一种方法是获得首先分配网格的所有日子。要在不重置范围之外的情况下执行此操作，最简单的方法是首先确定当天的所有事件，然后获取已分配网格的所有事件。 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属性，但是可以通过比较开始和增加起始值来在原始代码中获得。在示例小提琴中，我冒昧地将大量逻辑移动到Event对象以显示这种方法的可能性，但是您可以剥离当前代码所需的部分。第二个过滤器使用指定的网格创建事件数组。最后，getfreegrid会增加当前网格索引，只要它已经被使用过。如果没有指定的网格，则会略微添加搜索，但这也是可选的。

修改的根据原始示例，上面的代码仅设置'grid'的文本，但不进行任何定位。对于包含定位的示例：click here此快速示例使用具有位置相对性的封装div，将title类的css设置为绝对，并使用添加内的style.top来设置位置。也许不是最常用的方法，但它可以达到预期的目的。

作为一个小旁注，当重叠数月时，上述代码仅在上个月已添加时才有效。

依靠从1开始的新活动

1 个答案: