Evento FullCalendar V2 Titolo interrotto in vista mese

Question

Dopo l'aggiornamento a V2 di jquery fullcalendar ho notato che gli eventi con titoli lunghi avevano il titolo troncato.

Ho lavorato su questo problema aggiungendo CSS, ma ora sorge un altro problema: un evento con un titolo lungo sembra espandere l'intera riga, provocando uno spazio bianco nei giorni adiacenti che hanno eventi con titoli brevi.

CSS aggiunto

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

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

I 2 eventi il ​​13 novembre hanno una riga/altezza vuoto tra di loro causato dalla lunga manifestazione il 12 novembre.

Sono in perdita - qualcuno può aiutarmi?

Answer 1

In base alla struttura di jQuery Calendar, non c'è davvero alcun modo per ottenere ciò che si desidera. Questo perché gli eventi sono nelle righe della tabella. Come già detto nel primo commento alla tua domanda:

Tra la V2.0.0 (sto usando questo) e la V2.2.6 (quello che si sta utilizzando) la costruzione del programma spostato da divs a tables. Se esegui il downgrade del tuo CSS e JS alla V2.0.0, vedrai che il tuo problema scompare: jsfiddle.net/uawsdebv/12 Penso che sia più un lavoro che una risposta. Potrebbe essere possibile modificare il css relativo al tag, ma non sono abbastanza avanzato nei CSS per sapere quale potrebbe essere una soluzione.

Si può probabilmente vedere questo è l'unico modo per risolvere questo, per quanto ne so.

Answer 2

Non esiste una soluzione semplice al problema. Il problema risiede nel fatto che il calendario è strutturato usando le tabelle.

Answer 3

Le vostre intenzioni qui funzionano contro le operazioni principali della struttura della tabella.

L'altezza di una riga di tabella è costante per ogni riga rispettivamente, se si dispone di td di altezza variabile in una riga, quindi la riga adatta la sua altezza al td più grande e td più piccolo in quella riga avrà spazio vuoto tra loro e il prossima fila.

È possibile aggirare questo con le tabelle nidificate, che essenzialmente utilizzano tabelle all'interno di td.

Answer 4

È possibile specificare un altezza massima per ciascun evento e utilizzare i puntini di sospensione del testo. L'intero titolo dell'evento può essere visualizzato al passaggio del mouse usando l'attributo 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()); 
    }) 

Ecco il lavoro jsFiddle collegamento

Answer 5

Poiché la struttura del calendario HTML è basata sulle righe non è possibile galleggiare elementi come era prima (l'altezza della riga è impostata per l'elemento dell'altezza più alta all'interno della riga).

In alternativa si può fare questo,

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

Questo sarà di default nascondere il titolo e quando si passa vi mostrerà il documento nella piena.

Ecco come funziona jsfiddle