Question

我正在使用fullcalendar生成事件日历 - 下面是我输出的图片。

有没有办法让新事件在给定时间开始（并且不占用一整天/与其他事件重叠）？像slotEventOverlap之类的东西，但是更少的插槽和更多的事件。

This answer comes close - 我认为我可以在我的情况下实现这一点但似乎过于复杂。有没有更简单的方法来做到这一点，我找不到它？

Answer 1

这是一个稍微修改过的版本，用于解决从周中开始和/或一天不到一天的事件中出现的问题

eventAfterRender: function(event, element) {

    var currentPosition = $(element).position();
    var currentWidth = $(element).width();
    var pixelsPerDay =  $(element).offsetParent().siblings("table").find(".fc-day-content").width();
    var pixelsPerHour = pixelsPerDay/24;

    //Start Time
    var startTimeOffset = (event.start.getHours() * pixelsPerHour);
    if ($(element).hasClass('fc-event-start')) {
        $(element).css('width', (currentWidth - startTimeOffset) + "px");
        $(element).css('left', (currentPosition.left + startTimeOffset) + "px");
    }

    //End Time
    currentWidth = currentWidth - startTimeOffset; //we have now a new width
    var endTimeOffset = pixelsPerDay - (event.end.getHours() * pixelsPerHour);
    if ($(element).hasClass('fc-event-end')) {
        $(element).css('width', currentWidth - endTimeOffset + "px");
    }

}

Answer 2

更新回答：

    eventAfterRender: function(event, element, view) {
      //only show title text once
      if (!$(element).hasClass('fc-event-start')) {
          $(element, 'fc-event-title').text(event.title);
          $(element, 'fc-event-title').css( "text-align","center" );
      };

      var sameDate = (event.start.getDate() === event.end.getDate() &&
                        event.start.getMonth() === event.end.getMonth())
      var pixelsPerDay =  $(element).offsetParent().siblings("table").find(
                                                   ".fc-day-content").width();
      var pixelsPerHour = pixelsPerDay/24
      var currentWidth = $(element).width()
      var currentPosition = $(element).position()
      var endTimeOffest = pixelsPerDay - (event.end.getHours() * pixelsPerHour)
      var endTimeNewWidth = currentWidth - endTimeOffest
      var startTimeOffset = pixelsPerDay - ((24 - event.start.getHours()) * pixelsPerHour)

      //push event bars down a bit so they don't crush the dates
      $(element).css('top', currentPosition.top + 13 + 'px');

      if ($(element).hasClass('fc-event-end')) {
          $(element).css('width', endTimeNewWidth + "px");
      };

      if ($(element).hasClass('fc-event-start') && !sameDate) {
          $(element).css('width', (currentWidth - startTimeOffset) + "px");
          $(element).css('left', (currentPosition.left + startTimeOffset) + "px");    
      };
    },

原始答案：

我最终使用了这段代码 - 尽管它仍在进行中。

eventAfterRender: function(event, element, view) {
    var pixelsPerDay =  $(element).offsetParent().siblings("table").find(".fc-day-content").width();
    var pixelsPerHour = pixelsPerDay/24
    var currentWidth = $(element).width()
    var currentPosition = $(element).position()
    var endTimeOffest = pixelsPerDay - (event.end.getHours() * pixelsPerHour)
    var endTimeNewWidth = currentWidth - endTimeOffest
    var startTimeOffset = pixelsPerDay - ((24 - event.start.getHours()) * pixelsPerHour)
    if ($(element).hasClass('fc-event-end')) {
        $(element).css('width', endTimeNewWidth + "px");
    };
    if ($(element).hasClass('fc-event-start')) {
        $(element).css('width', (currentWidth - startTimeOffset) + "px");
        $(element).css('left', (currentPosition.left + startTimeOffset) + "px");
        $(element).css('top', (currentPosition.top - 44) + "px")
    };
}

如果一个事件在一周中开始和/或是一个不到一天的事件会有一些问题 - 这会抛出格式化，虽然可以通过注释掉以下行来解决：

$(element).css('top', (currentPosition.top - 44) + "px")

Answer 3

请注意，此处的答案不适用于当前版本的FullCalendar。我创造了另一个似乎有用的东西。

            eventRender: function(event, element, view) {
                var currentPosition = jQuery(element).position();
                var currentWidth = jQuery(element).width();
                var parent = jQuery(element).offsetParent();
                var siblings = parent.children("table");
                var pixelsPerWeek = siblings.width();
                var pixelsPerDay =  pixelsPerWeek/7;
                var pixelsPerHour = pixelsPerDay/24;

                //Start Time
                var startTimeOffset = (new Date(event.start).getHours() * pixelsPerHour);
                var newWidth = currentWidth;

                if ( jQuery(element).hasClass('fc-start') ) {
                    newWidth -= startTimeOffset;
                    jQuery(element).css('left', startTimeOffset + "px");
                }


                var end = new Date(event.end);
                var endTimeOffset = pixelsPerDay - (end.getHours() * pixelsPerHour);
                if ( jQuery(element).hasClass('fc-end') ) {
                    newWidth -= endTimeOffset;
                }

                jQuery(element).css('width', (newWidth) + "px");
            }

事件不应该在fullcalendar的月视图中重叠

3 个答案: