事件之前或之后的渲染时间

Question

我有一些事件在“准备工作”或“驾驶时间”之前或之后有一个“缓冲”时间。我在试着想办法显示这个。我的数据的一些伪代码：

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

理想的做法是显示一个10:55开始的活动，但在前5分钟使用不同的风格。你能想出任何方法来实现这一点吗？

Answer 1

如果我理解你的问题，这将从事件开始减去准备时间，并将其着色(百分比)与事件的其余部分不同。在Firefox54、Chrome58、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值来确定要显示的大小。使用:在我添加一个稍微透明的阴影区域之前，显示“缓冲”时间。

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

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

谢谢!