Название события FullCalendar V2 отключено в режиме просмотра месяца

После обновления до V2 полноэкранного jquery я заметил, что события с длинными заголовками были отключены.

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

Добавлен CSS

.fc-day-grid-event > .fc-content {
white-space: inherit; }

Смотрите: http://jsfiddle.net/uawsdebv/10/

2 события 13 ноября имеют пустую строку/высоту между ними, вызванную длинным событием 12 ноября.

Я в недоумении - может ли кто-нибудь помочь?

Ответ 1

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

В качестве альтернативы вы можете сделать это,

.fc-day-grid-event > .fc-content {
   white-space: normal;
   text-overflow: ellipsis;
   max-height:20px;
}
.fc-day-grid-event > .fc-content:hover {
   max-height:none!important; 
}

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

Здесь как это работает jsfiddle

Ответ 2

Вы можете указать максимальную высоту для каждого события и использовать многоточие переполнения текста. Целый заголовок события может отображаться с помощью мыши с использованием атрибута title html. //CSS

    .fc-day-grid-event > .fc-content {
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer; // for showing title 
    max-height:20px; // can be adjusted according to your requirement
}

//JQuery

$(".fc-content").each(function(){
  $(this).attr("title",$(this).text());
  })

Вот ссылка jsFiddle

Ответ 3

Основываясь на структуре jQuery Calendar, на самом деле нет никакого способа достичь желаемого. Это связано с тем, что события находятся в строках таблицы. Как уже упоминалось в первом комментарии к вашему вопросу:

Между V2.0.0 (я использую этот) и V2.2.6 (тот, который вы используете) построение повестки дня переместилось с divs на tables. Если вы измените свой CSS и JS на V2.0.0, вы увидите, что ваша проблема исчезнет: jsfiddle.net/uawsdebv/12 Я считаю, что это скорее работа, чем ответ. Возможно, можно изменить css относительно тега, но я недостаточно продвинутый в CSS, чтобы узнать, что может быть решением.

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

Ответ 4

Нет прямого решения вашей проблемы. Проблема заключается в том, что календарь структурирован с использованием таблиц.

Ответ 5

Ваши намерения здесь работают против основных операций структуры таблицы.

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

Вы можете обойти это с помощью вложенных таблиц, которые по существу используют таблицы в td.

Ответ 6

Кажется, проблема связана со свойством white-space в классе fc-content. В моем случае я избавился от этого следующим образом:

.fc-content{white-space:normal}