Jquery FullCalendar timeout evento metodo hover

Question

Ho FullCalendar attivo e funzionante ed è molto bello. La mia domanda qui è il modo migliore per implementare la funzionalità di hover del timeslot. Sarebbe molto bello se l'utente potesse avere un segnale visivo per ogni fascia oraria che stanno passando sopra.

Ho trovato il seguente collegamento http://code.google.com/p/fullcalendar/issues/detail?id=269 che fornisce una soluzione che aggiunge una nuova struttura nella riga di cella dell'agenda per fornire l'accesso alle singole celle. Tuttavia, è indicato che questa soluzione farà sì che FullCalendar diventi lento.

Prima di iniziare a esaminare il codice FullCalendar, ho pensato di chiedere se qualcun altro ha qualche idea o soluzione.

I miei pensieri su questo si avvicina sono i seguenti:

1. eventi Aggiungi segnaposto per ciascuna finestra temporale. L'utente non vedrebbe questi eventi ma questi eventi invisibili potrebbero essere utilizzati per consentire la marcatura "hover". La mia preoccupazione qui è che l'aggiunta di eventi aggiuntivi potrebbe rendere lenta FullCalander. Inoltre, la funzionalità di trascinamento della selezione potrebbe essere influenzata.

2. FullCalender è in grado di determinare il periodo di tempo in cui l'utente ha fatto clic. Sarebbe possibile utilizzare il codice su cui si attiva la finestra temporale per fornire un riferimento per l'evidenziazione al passaggio del mouse?

3. Altro?

Sto considerando l'opzione 2 come punto di partenza. Tuttavia, se qualcuno ha un'altra idea per una soluzione praticabile, sarei lieto di sentirlo.

Se trovo una soluzione, la posterò qui.

Grazie,

Jim

Ecco un link al sito FullCalendar: http://fullcalendar.io/
ho trovato molto bello lavorare con.

Answer 1

Ho avuto lo stesso problema dal momento che a volte è difficile vedere quale fascia oraria si sta effettivamente facendo clic su. Per risolvere questo problema ho scritto una riga per modificare fullcalendar.js. Non è la soluzione ideale, ma è una soluzione rapida.

Questa è la linea:

"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" + 

e lo mise dentro (intorno alla linea di codice 3080):

"<th class='fc-agenda-axis " + headerClass + "'>" + 
((!slotNormal || !minutes) ? formatDate(d, opt('axisFormat')) : '&nbsp;') + 
"</th>" + 
"<td class='" + contentClass + "'>" + 
"<input type='hidden' class='timeslot-value' value='" + formatDate(d, opt('axisFormat')) +"'>" + 
"<div style='position:relative'>&nbsp;</div>" + 
"</td>" + 

Ora si può semplicemente inserire un hover tooltip su tutti fc-slot che hanno la Classe .ui-widget-content (lo <td> che vedi sopra nel codice). E ottieni il valore di input nascosto da visualizzare in quel suggerimento.

Se jQuery, è possibile utilizzare l'evento dal vivo e ottenere il primo figlio corrispondente e acquisirne il valore.

Se ExtJS

Ext.onReady(function(){ 

Ext.QuickTips.init(); 

var tip = Ext.create('Ext.tip.ToolTip', { 
    target: 'your-calendar-id', 
    width: 140, 
    minHeight: 30, 
    delegate: '.ui-widget-content', 
    autoHide: false, 
    renderTo: Ext.getBody(), 
    listeners: { 
     beforeshow: function updateTipBody(tip) { 
      tip.update('<dl><dt style="font-weight: 600;"><?php echo $this->translate('Start time')?>: </dt><dd>' + Ext.get(this.triggerElement).first().getValue() + '</dd></dl>'); 
     } 
    } 
}); 
}); 

Answer 2

Il seguente codice ha fatto il trucco per me.

$('.ui-widget-content').hover(function(){ 
    if(!$(this).html()){  
     for(i=0;i<7;i++){ 
      $(this).append('<td class="temp_cell" style="border: 0px; width:'+(Number($('.fc-day').width())+2)+'px"></td>'); 
     } 

     $(this).children('td').each(function(){ 
      $(this).hover(function(){ 
       $(this).css({'background-color': '#ffef8f', 'cursor': 'pointer'}); 
      },function(){ 
       $(this).prop('style').removeProperty('background-color'); 
      }); 
     }); 
    } 
},function(){ 
    $(this).children('.temp_cell').remove(); 
}); 

Assicurarsi di aggiungere un commento dopo il codice che crea un'istanza del calendario e, dovrebbe funzionare come è se la proprietà defaultView del calendario JQuery è 'AgendaWeekly'.

Cheers, M

Answer 3

Mi rendo conto che non è in realtà una risposta, ma un commento su un precedente risposta, ma ho ancora raggiunto la fama di commentare le risposte.

W.R.T alla risposta di @ user4243287 un ulteriore passaggio che ho dovuto fare era mettere questa logica nell'opzione 'viewRender' durante l'inizializzazione del mio calendario per assicurarmi che continuasse a funzionare quando mi muovo tra le settimane.