指望从1

经过努力工作（我不先进的js）我有一些纯js日历。到目前为止，我很荣幸能够拥有它......但有些想法让我陷入了数天的困境。指望从1

我有我的日历事件终于得到那种在多日活动在同一HIGHT所示。因此我补天[X] [“网格”]保持问题变种

如果你看我的日历，你会看到“party”事件值days [x] [“grid”]被保存，但现在“new”事件正在计入grid：3，但是我希望grid：1 。

我希望你能理解我的问题。 “新”事件应该有网格：1！

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

来源

2015-09-21 fteinz

我不明白你的问题。但是，这似乎是一个JavaScript问题，而不是CSS。 –

我在总结每个事件应该在其开始日期获得第一个可用插槽（网格）并在之后保留它时是否正确。那么在你的例子派对的第10天仍然会在第2格上，第1格会保持空白？ –

给MarcosPérezGude ....你是对的。它必须与我的js ... CSS只应该证明我最终想做的事情。第一个新的事件网格应该有正确的值1. – fteinz

对于初学者友好的填充物体的建议。您可以直接定义对象，而不使用子数组。例如：

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

对于第一过滤器用于结束属性，该属性被添加到代码示例，而是可以在可以得到您的原始代码通过比较来启动并增加起始值。在示例小提琴中，我冒昧地将大量逻辑移动到Event对象以显示这种方法的可能性，但是您可以将需要的部分剥离到当前代码中。第二个过滤器用分配的网格创建一个事件数组。最后，getfreegrid只要已经使用就会增加当前的网格索引。如果没有指定的网格，则会添加一个小小的补充，即跳过搜索，但这也是可选的。

编辑根据原始示例，上面的代码仅设置“网格”文本，但不进行任何定位。举个例子，包括定位：click here这个快速的例子使用了一个封闭的div与位置相关，将title类的css设置为绝对，并使用添加中的style.top来设置位置。也许不是最简单的方法，但它适用于预期的目的。

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

来源

2015-09-21 17:26:54

回答

相关问题