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

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

理想的情况是显示一个始于10:55的事件,但在前5分钟内使用不同的样式。 您能想到实现此目的的任何方法吗?

#1楼 票数:0

如果我理解您的问题,这将从事件开始时减去准备时间,并以与其他事件不同的方式(百分比)对阴影进行阴影处理。 已在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)) */
  }
});

#2楼 票数:0

谢谢你的想法! @smcd找到了我需要的解决方案,然后我开始更好地了解我所获得的数据,不得不稍微修改一下自己的想法。 渐变的想法使事件保持完整,并可以调整大小和拖动,这很棒。

我数据的变化意味着缓冲时间不是开始时间和结束时间的一部分。 相反,它是一个附加字段。 因此,仍然需要以9-10而不是8:55-10来读取和写入9am-10am且有5分钟缓冲的约会。这也符合客户的体验,因为他们正在考虑9am-10am的事件。 他们确实需要了解还有额外的时间。

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

这种方法有一个警告:缓冲时间可能会使约会重叠,而不是将约会推到新的一行。 虽然这可能是可取的。

最后,缓冲区数据更像是辅助文本,因此我认为这是正确的解决方案。

谢谢!

  ask by noynek translate from so

未解决问题?本站智能推荐:

2回复

如何删除事件标题之前的显示时间

全日历上显示的每个事件都有标题,但是带有开始时间。 如何删除它只是显示为我设置。 我是否需要修改源代码或如何进行设置。
1回复

防止呈现给定日期之前发生的事件

我正在尝试删除整个日历中某个开始日期之前的所有事件(假设开始日期为2016年10月17日)。 这是我的代码,正是这样做的: 因此,在加载页面后,所有在10月17日至10月17日之前发生的事件都消失了。 但是,如果我导航到下个月(即11月)然后导航回10月,则所有被删除的事件都会突然返回
1回复

在将外部事件放到日历上之后,完整日历是否必须重新渲染每个事件?

我正在建立一个日历,允许用户将外部事件拖到日历上。 当他们这样做时,将触发ajax调用并将事件保存到数据库。 为了了解然后重新调整或重新安排了什么事件,我使用刚刚在数据库中创建的事件ive的ID更新了该事件。 这意味着如果我需要进一步更新事件。 即有人移动事件或确实改变了持续时间等,我可
1回复

FullcalendarSQL获取事件,该事件在视图开始之前开始,在视图结束之后结束

我的SQL查询有一个问题,该查询用于获取全日历事件,除非在当前视图开始之前开始一个事件,在当前视图结束之后结束一个事件(例如,如果我有一个开始的事件),否则一切工作正常直到星期一,直到星期三,在星期二的日视图中都不会显示。 这是因为我不确定如何进行SQL查询以获取符合此条件的事件。 我的当前
1回复

fullCalendar+Bootstrap选项卡故障:在调整浏览器大小之前不渲染事件

将fullCalendar与Bootstrap一起使用时, 日历出现在非活动的选项卡窗格中时,我遇到一个奇怪的问题。 我正在使用AgendaView ,它最初与列一起显示了几个小时,并且只为其分配了1像素的宽度。 它位于“ Operarios”标签中。 但是最大的问题是渲染事件时。
1回复

fullCalendar-在一个时间段(从晚上8点到午夜)内渲染事件

我是Full Calendar插件的新手。 我的要求是,我们只能在晚上8:00到午夜12:00之间(在一个时隙内)添加事件。 我正在努力实现这一目标,但似乎无济于事。 有人可以指出我的解决方法。 我从http://code.google.com/p/fullcalendar-asp-n
1回复

FullCalendar重新渲染事件

我正在使用与 jQuery Mobile 集成的 Fullcalendar。 当我尝试在pageshow事件期间使用以下方法动态添加新事件时,它会导致 JavaScript pageshow ,如下所示 我的 JavaScript 代码
1回复

全日历不渲染事件

我有这段代码创建了一个事件对象数组,然后将它们传递到日历中,但是由于某种原因,日历无法呈现事件。 当我将事件输出到控制台时,我得到了一组对象,这些对象似乎在按预期方式工作。 对象的形式为: 看来我要么搞砸了回调,要么我的事件丢失了一些东西,但是我似乎无法弄清楚是什么