Question

我有一个＆＃34;缓冲区＆＃34;在准备工作之前或之后的时间＆＃34;准备工作＆＃34;或者＆＃34;驾驶时间＆＃34;。我试图找出如何显示它。我的数据的一些伪代码：

{
  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值来确定要显示的大小。使用：在我添加一个略微透明的阴影区域之前，显示＆＃34;缓冲区＆＃34;时间。

这种方法有一点需要注意：缓冲时间可能会重叠约会而不是将它们推到新线上。这可能是可取的。

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

谢谢！

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

2 个答案: