FullCalendar - можно ли изменить положение времени окончания?

Question

Answer 1

Хорошо глядя на код, я не мог найти очень простой способ сделать это. Причина в том, что когда вы добавляете конечное время, оно добавляется в начальный промежуток времени, поэтому вот решение, которое я придумала:

$('#cal').fullCalendar({
    'events': test,
    'timeFormat': 'H:mm - {H:mm}'
});

$('.fc-event-time').each(function() {
    var obj = $(this);
    var parent = $(this).parent();
    var time = $(this).text();
    var start = time.split(' - ')[0];
    var finish = time.split(' - ')[1];
    obj.text(start);
    parent.append('<span class="fc-event-time" style="float: right;">' + finish + '</span>');
});

Посмотрите, как это работает здесь

• Для начала добавьте 'timeFormat' к календарю (я предполагаю, что у вас уже есть его время окончания) , укажите для разделителей время - ( это позволит разделить два раза)
  • Примечание любое время внутри {} будет временем окончания.
• Затем получите jQuery для циклического просмотра каждого элемента с классом fc-event-time (который добавляется к времени с помощью fullCalendar) .
• Теперь нам нужно завладеть родителем времени, чтобы мы могли добавить к нему элемент позже.
• Далее получите время и разделите на - (пробел)
• Теперь установите оригинальный держатель, который имел и начало, и конец, так что это только начало.
• Теперь добавьте еще один элемент span к родительскому элементу, который является заголовком события, но добавьте его справа и добавьте время окончания.

---

Согласно комментариям justkt , я подумал, что описанный выше метод будет работать только при загрузке страницы, поэтому, когда вы измените представление, он не запустится снова.
Чтобы решить эту проблему, добавьте обратный вызов при отображении событий:

$('#cal').fullCalendar({
    'events': test,
    'eventRender' : renderEvents,
    'timeFormat': 'H:mm - {H:mm}',
});

function renderEvents(){
    $('.fc-event-time').each(function() {
        var obj = $(this);
        if (!obj.hasClass('finish-moved')) {
            var parent = $(this).parent();
            var time = $(this).text();
            var start = time.split(' - ')[0];
            var finish = time.split(' - ')[1];
            obj.text(start);
            parent.append('<span class="fc-event-time finish-moved" style="float: right;">' + finish + '</span>');
            obj.addClass('finish-moved');
        }
    });
}

Посмотрите, как это работает здесь

Для этого нужно было добавить немного логики, рендеринг событий, кажется, вызывается для каждого события, поэтому, когда добавляется интервал окончания, при следующем запуске цикла он попытается разделить время окончания, поэтому остановите это добавление. класс finish-moved, чтобы на него больше не влияли.

---

Еще одно обновление в соответствии с комментариями justkt :

Когда вызывается обратный вызов, он пропускает объект, на который он воздействует, поэтому вы можете «оперировать» только этим вместо нескольких циклов:

$('#cal').fullCalendar({
    'events': test,
    'eventRender': renderEvents,
    'timeFormat': 'H:mm - {H:mm}',
});

function renderEvents(e, a) {
    var startObj = $(a).find('.fc-event-time');
    var time = $(startObj).text().split(' - ');
    $(startObj).text(time[0]);
    $(a).find('.fc-event-inner').append('<span class="fc-event-time" style="float: right;">' + time[1] + '</span>');
}

Посмотрите, как это работает здесь

Это очень похожий принципал, он просто работает с событием, вызвавшим обратный вызов, поэтому должен быть менее ресурсоемким.