Длинный заголовок в плагине Jquery FullCalendar

Question

У меня небольшая проблема с длинным заголовком в плагине fullcalendar.Если у вас длинный заголовок и короткое время события (например, 1 день), значит, название вашего события не будет соответствовать.

Что я могу с этим сделать?

Answer 1

Если вы хотите показать заголовок в несколько строк, вы можете переопределить CSS по умолчанию для полного календаря.

CSS по умолчанию в FullCalendar v2.1.1

.fc-day-grid-event > .fc-content {
   white-space: nowrap;
   overflow: hidden;
}

Удалите white-space: nowrap;, и ваш заголовок всегда будет виден.

Answer 2

Сделайте снимок:

eventRender: function(event, element) {
    var limit = 20;
    if (event.title.length > limit) {
        element.find('.fc-event-title').text(event.title.substr(0,limit)+'...').parent().attr('title', event.title);
    }
}

Это обрезает и добавляет заголовок с родными подсказками браузера.вы можете использовать qtip, если хотите

eventRender: function(event, element) {
    var limit = 20;
    if (event.title.length > limit) {
        element.find('.fc-event-title').text(event.title.substr(0,limit)+'...');
        element.qtip({
            // qtip options here
        });
    }
}

Использовать qtip2, так как qtip1 порвет с jQuery 1.9+ info здесь

Answer 3

Я исправил это следующим образом для MonthView:

Найти эту функцию: (для меня это на линии # 5381)

function daySegHTML(segs)

В этой функции найдите этот код:

html +=
     " class='" + classes.join(' ') + "'" +
     " style='position:absolute;z-index:8;left:"+left+"px;" + skinCss + "'" +

Добавьте перед этим кусок кода, чтобы он выглядел следующим образом:

if(event.title.length > 10)
    var eventShortTitle = event.title.substring(0,10) + '...';
else
    var eventShortTitle = event.title;

html +=
     " class='" + classes.join(' ') + "'" +
     " style='position:absolute;z-index:8;left:"+left+"px;" + skinCss + "'" +

Затем несколько строк ниже найдите этот код:

"<span class='fc-event-title'>" + htmlEscape(event.title) + "</span>" +

Замените его наthis:

"<span class='fc-event-title'>" + htmlEscape(eventShortTitle) + "</span>" +

Ваша проблема с длинным заголовком теперь исправлена ​​в представлении месяца.Вы можете сделать то же самое для просмотра недели и дня.

Answer 4

Я сделал немного другую вещь с этой проблемой:

Найдите эту часть в источнике fullcallendar:

if (seg.contentTop !== undefined && height - seg.contentTop < 10) {
// not enough room for title, put it in the time header
    eventElement.find('div.fc-event-time')
    .text(formatDate(event.start, opt('timeFormat')) + ' - ' + event.title);
(...)

Это if меняет способ отображения коротких событий.

Я просто удалил все if из исходного кода и добавил eventAfterRender обратный вызов к своему js-коду:

eventAfterRender: (function(event, element, view) {
    $(".fc-event").each(function(){
        if ($(this).height() < $(this).find('.fc-event-content').height()) {
            var fcPrevHeight = $(this).height();
            var fcSlideHeight = $(this).height() + $(this).find('.fc-event-content').height();
            $(this).hover(      
                function() {
                    $(this).css('height', fcSlideHeight)
                },
                function() {
                    $(this).css('height', fcPrevHeight);
                }
            )
        }
    })
})

Когда событие маленькое и вы не видитевесь заголовок события, этот код изменяет высоту div при наведении мыши, чтобы вы могли заголовок события: P

Answer 5

Вы можете:

1. Изменить способ визуализации события, либо в eventRender (обратный вызов, где пользователь может изменить div), либо в источнике самого fullcalendar.
2. Добавьте в событие календаря всплывающую подсказку с полным заголовком, возможно, с qtip .
3. Измените размер календаря и приращение в минутах (для повестки дняпросмотр дня недели), чтобы у более коротких событий было больше места, если это частая проблема.

Answer 6

Вы можете добавить в событии разрывную строку между временем и заголовком, используя func eventRender.

Это решение применимо только для просмотра месяца .

eventRender: function(event, element, view) {
    var limit = 10;
    if (view.type === 'month' && event.title && event.title.length > limit) {
        element.find('.fc-title')[0].insertAdjacentHTML('beforebegin', "<br>");
    }
} 

Answer 7

Вот вариант других eventRender ответов, который применяется только в представлении месяца, где заголовки усечены наиболее строго:

eventRender: function(event, element, view) {
    var limit = 10;
    if (view.type === 'month' && event.title.length > limit) {
        element.find('.fc-title').parent().attr('title', event.title);
    }
}

Answer 8

@ Ответ Arron у меня отлично работает, кроме обновления для версии FullCalendar v2.9.1

нужно найти div с классом fc-title, а не .fc-event-title

var titleLimit = 20;
    if (event.title.length > titleLimit) {
        eventElement.find('.fc-title').text(event.title.substr(0,titleLimit)+'...').parent().attr('title', event.title);
    }