jquery - example - Título del evento FullCalendar V2 cortado en vista de mes

fullcalendar español

Question

Después de actualizar a V2 de jquery fullcalendar noté que los eventos con títulos largos tenían el título cortado.

Resolví este problema agregando CSS, pero ahora surge otro problema: un evento con un título largo parece expandir toda la fila, causando que aparezca un espacio en blanco en días adyacentes que tienen eventos con títulos cortos.

CSS añadido

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

Ver: http://jsfiddle.net/uawsdebv/10/

Los 2 eventos del 13 de noviembre tienen una fila / altura vacía entre ellos causada por el evento largo del 12 de noviembre.

Estoy en una pérdida, ¿alguien puede ayudar?

Answer 1

Basado en la estructura de jQuery Calendar, realmente no hay forma posible de lograr lo que desea. Esto es porque los eventos están en filas de la tabla. Como se mencionó en el primer comentario a su pregunta:

Entre la V2.0.0 (estoy usando esta) y la V2.2.6 (la que estás usando), la construcción de la agenda se movió de divs a tables . Si baja su CSS y JS a la V2.0.0, verá que su problema desaparece: jsfiddle.net/uawsdebv/12 Considero que esto es más una solución que una respuesta. Puede ser posible modificar el css en relación con la etiqueta, pero no estoy lo suficientemente avanzado en CSS para saber qué podría ser una solución.

Probablemente pueda ver que esta es la única forma de resolver esto, que yo sepa.

Answer 2

Dado que la estructura HTML del calendario se basa en filas, no es posible hacer flotar los elementos como estaba antes (la altura de la fila se establece para el elemento de mayor altura dentro de la fila).

Alternativamente puedes hacer esto,

.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; 
}

Esto ocultará por defecto el título y cuando lo muevas se mostrará el título completo.

Así es como funciona jsfiddle

Answer 3

No hay una solución directa para su problema. El problema reside en el hecho de que el calendario se estructura utilizando tablas.

Answer 4

Puede especificar una altura máxima para cada evento y usar puntos suspensivos de desbordamiento de texto. El título completo del evento se puede mostrar con el mouse sobre el atributo html del título. // 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());
  })

Aquí está el enlace jsFiddle trabajo

Answer 5

Sus intenciones aquí van en contra de las operaciones centrales de la estructura de la tabla.

La altura de una fila de la tabla es constante para cada fila respectivamente, si tiene td''s de altura variable en una fila, entonces la fila adaptará su altura a la td más grande y las td más pequeñas en esa fila tendrán un espacio vacío entre ellas y la fila siguiente.

Puede solucionar esto con tablas anidadas, que esencialmente utilizan tablas dentro de td.