события не должны пересекаться в месячном обзоре на fullcalendar

0

Я использую fullcalendar для создания календаря событий - ниже приведено изображение моего вывода.

Изображение 174551

Есть ли способ сделать запуск нового события в данный момент времени (и НЕ принимать весь день/перекрываться с другими событиями)? Что-то вроде slotEventOverlap но меньше слота и более простого события.

Этот ответ близок - и я думаю, что смогу реализовать это в моем случае, но это кажется слишком сложным. Есть ли более простой способ сделать это, и я просто не могу его найти?

Теги:
fullcalendar

3 ответа

5
Лучший ответ

Вот немного измененная версия, которая устраняет проблему из события, которое начинается в середине недели и/или менее одного дня

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");
    }

}
Поделиться
  • 0
    это намного чище, чем мой код, но я попробовал его, и есть проблема с временем окончания - ширина не достаточно велика. к сожалению, у меня нет времени играть с ним в данный момент, но я обновлю свой ответ, чтобы показать мой текущий код (после нескольких переписываний). спасибо за ваш вклад!
0

Обратите внимание, что ответ здесь не работает с текущей версией 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");
            }
Поделиться
0

обновленный ответ:

    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")
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню