Выделите события fullcalendar, который распространяется на несколько строк / столбцов

0

В моем web app Angular web app я использую календарь Angular UI Calendar в сочетании с Fullcalendar для отображения пользовательских событий.

В этом случае, когда пользователь click на событие, которое он подсвечивает, но это имеет небольшой недостаток, поскольку это происходит прямо сейчас, потому что, когда событие расширяется по нескольким строкам (в представлении month) или нескольким столбцам (в режиме week), это а не событие отверстия, которое будет выделено - Скриншот 1.

Скриншот 1 Изображение 174551

На изображении у нас есть 2. Event которое проходит с 19 марта по 21 марта, но, как вы можете видеть, единственная часть, которая подсвечивается, - это 19. и 20. March.

В Screenshot 2 я действительно хочу, чтобы пользователи не путались и, возможно, думали, что на самом деле это два события, а не одно событие (которое было бы в этом случае).

Скриншот 2 Изображение 174551

Это часть моего controller которая добавляет подсветку к событию.

контроллер

$scope.alertOnEventClick = function(calEvent, jsEvent, view){
   $(".fc-state-highlight").removeClass("fc-state-highlight");
   angular.element(jsEvent.currentTarget).addClass("fc-state-highlight");
};
Теги:
fullcalendar
ui-calendar

2 ответа

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

Fullcalendar 2.4 на демоверсии (не угловой) https://jsfiddle.net/4kbLa4da/

$('#calendar').fullCalendar({
  defaultDate: '2016-03-01',
  events: [{
    start: '2016-03-01',
    end: '2016-03-05',
    title: 'Event 1'
  }, {
    start: '2016-03-06',
    end: '2016-03-15',
    title: 'Event 2',
    id: 3
  }],
  eventRender: function(event, element, view) {
    // event._id gets auto-populated, either event.id or auto-generated value
    element.attr('data-id', event._id);
    toggleClass(event._id);
  },
  eventMouseover: function(event, jsEvent, view) {
    toggleClass(event._id);
  },
  eventMouseout: function(event, jsEvent, view) {
    toggleClass(event._id);
  }
});

function toggleClass(id) {
  /* Find all segments for the specific event and toggle a class */
  var $event = $('a.fc-event[data-id="' + id + '"]');
  $.each($event, function() {
    $(this).toggleClass('my-highlight');
  });
}

Если вы хотите, чтобы это произошло, нажмите: https://jsfiddle.net/4kbLa4da/2/

eventClick: function (event, jsEvent, view) {
    toggleClass(event._id);
  }
 /* ... */
/* And change toggleClass to turn it off first */
function toggleClass(id) {
  /* Find all segments for the specific event and toggle a class */
  var $event = $('a.fc-event[data-id="' + id + '"]');
  $('a.my-highlight').each(function () {
    $(this).toggleClass('my-highlight');
  });
  $.each($event, function() {
    $(this).toggleClass('my-highlight');
  });
}
Поделиться
  • 0
    Вы, сэр, гений, это именно то, что я искал, и это прекрасно работает. Большое спасибо!
  • 0
    Хорошая сделка. Напомним, что использование event._id, вероятно, не лучшая практика, так как оно может измениться в реализации fullcalendar в будущем. Преимущество заключается в том, что он позволяет работать для событий, для которых явно не указан event.id
Показать ещё 1 комментарий
0

Я исправил его, добавив custom

Поделиться

Ещё вопросы

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