事件之前或之后的呈现时间

Question

我有像“准备工作”或“驾驶时间”之前或之后有“缓冲”时间的事件。我试图弄清楚如何显示这个。我的数据的一些伪代码：

{ 
    start: 11am, 
    end: 11:30am, 
    preptime: 5 minutes 
} 

理想的事情将是表明开始于10:55的事件，但有不同的风格对于那些第一次5分钟。你能想出任何方法来实现这一目标吗？

Answer 1

如果我理解了你的问题，这将从事件开始时间减去准备时间，并将其与事件的其余部分区别开来（百分比）。测试Firefox 54，Chrome 58，Edge，IE11。

https://jsfiddle.net/wp3nyax7/

$(function() { 
    var preptime = 'preptime'; /* name of property that holds prep time (minutes!) */ 

    $('#calendar').fullCalendar({ 
    events: [{ 
     title: 'Event 1 has prep time', 
     start: moment(), 
     end: moment().add(30, 'minutes'), 
     preptime: 5 
    }, { 
     title: 'Event 2 no prep', 
     start: moment().add(1, 'hour'), 
     end: moment().add(1.5, 'hour') 
    }], 
    eventRender: function(event, element, view) { 
     // if there is a prep time, calculate how much to shade and make gradient for it 
     if (event.hasOwnProperty(preptime)) { 
     var prep = event[preptime]; 
     var length = event.end.diff(event.start, 'minutes') - prep; 
     var ppct = (prep/length).toFixed(2) * 100; 
     makeGradients(element, ppct); 
     } 
    }, 
    /* subtract prep time (minutes!) from start of event */ 
    eventDataTransform: function(eventData) { 
     if (eventData.hasOwnProperty(preptime)) { 
     eventData.start.subtract(eventData[preptime], 'minutes'); 
     } 
     return eventData; 
    } 
    }); 

    function makeGradients(element, ppct) { 
    /* gradient info found via http://gradcolor.com/css3-gradient.php */ 
    /* All these prefixed editions may not be necessary? Didn't bother to find out */ 
    var prefixes = ['', '-moz-', '-ms-', '-o-', '-webkit-']; 
    var color1 = '#992222', 
     color2 = '#229922'; 
    var grad = 'linear-gradient(left, {color1} {pct}%, {color2} {pct}%)' 
     .replace('{color1}', color1) 
     .replace('{color2}', color2) 
     .replace(/{pct}/g, ppct); 
    $.each(prefixes, function(i, v) { 
     element.css('background-image', v + grad); 
    }); 
    /* also -webkit-gradient(linear, left bottom, right bottom, color-stop(%,color1), color-stop(%, color2)) */ 
    } 
}); 

Answer 2

谢谢你的想法！ @smcd提供了我需要的解决方案，然后我开始更好地理解我所掌握的数据，并且不得不修改我的想法。渐变的想法可以让事件保持不变，并调整大小并拖动，这非常棒。

我的数据变化意味着缓冲时间不是开始和结束时间的一部分。相反，这是一个额外的领域。因此，上午9点到上午10点约5分钟的缓冲区仍然需要读取和写回为9-10而不是8:55 - 10.这与客户体验相匹配，因为他们正在考虑上午9点至上午10点的事件。他们确实需要看到有额外的时间需要。

我的解决方案是将类添加到事件对象，例如：.buffer-5，.buffer-10，.buffer-15以支持5分钟的间隔。从那里我使用slotWidth值来确定显示的大小。使用之前：我添加一个稍微透明的阴影区域，显示“缓冲”时间。

这种方法有一个警告：缓冲时间可能与约会重叠，而不是将它们推到新行上。这可能是可取的，但。

最后，缓冲区数据被视为更像帮助文本，所以我认为这是正确的解决方案。

谢谢！