Jquery FullCalendar Ereignis Timeslot Hover-Methode

Question

Ich habe FullCalendar und läuft und es ist sehr nett. Meine Frage ist hier, wie man die Zeitfenster-Hover-Funktionalität am besten implementiert. Es wäre sehr nett, wenn der Benutzer einen visuellen Hinweis für einen bestimmten Zeitschlitz hätte, über den er schwebt.

Ich habe den folgenden Link http://code.google.com/p/fullcalendar/issues/detail?id=269 gefunden, der eine Lösung gibt, die eine neue Struktur in der Agendazellenzeile hinzufügt, um den Zugriff auf einzelne Zellen zu ermöglichen. Es wird jedoch angezeigt, dass diese Lösung dazu führen wird, dass FullCalendar träge wird.

Bevor ich in den Vollkalender-Code gucke, dachte ich, ich würde fragen, ob jemand andere Ideen oder eine Lösung hat.

Meine Gedanken darüber nähern sich wie folgt dar:

1. Liste Platzhalter Ereignisse zu jedem Zeitfenster. Der Benutzer würde diese Ereignisse nicht sehen, aber diese unsichtbaren Ereignisse könnten verwendet werden, um "Hover" -Markierungen zuzulassen. Meine Sorge hier ist, dass das Hinzufügen der zusätzlichen Ereignisse dazu führen würde, dass FullCalander träge wird. Auch die Drag & Drop-Funktionalität könnte beeinträchtigt werden.

2. FullCalender kann bestimmen, in welchem ​​Zeitfenster der Benutzer geklickt hat. Wäre es möglich, den Code zu verwenden, der auf das Zeitfenster geklickt wird, um eine Referenz für die Hover-Hervorhebung bereitzustellen?

3. Andere?

Ich erwäge Option 2 als einen Ort zum Starten. Wenn jedoch jemand eine andere Idee für eine praktikable Lösung hat, würde ich mich freuen, das zu hören.

Wenn ich mit einer Lösung komme, werde ich es hier posten.

Danke,

Jim

Hier ist ein Link auf die Website FullCalendar: http://fullcalendar.io/
ich es sehr schön gefunden haben, mit zu arbeiten.

Answer 1

Ich hatte das gleiche Problem, da es manchmal schwer ist zu sehen, auf welchem ​​Zeitfenster du gerade klickst. Um das zu beheben, habe ich eine Zeile geschrieben, um fullcalendar.js zu ändern. Nicht die ideale Lösung, aber es ist eine schnelle Lösung.

Dies ist die Zeile:

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

und legte sie innen (um Code-Zeile 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>" + 

Jetzt können Sie nur einen Tooltip schweben auf allen fc-Slots verfügen, die es haben .ui-widget-content-Klasse (die <td> sehen Sie oben im Code). Und hole den versteckten Eingabewert, der in diesem Tooltip angezeigt werden soll.

Wenn Sie jQuery verwenden, können Sie das Live-Ereignis verwenden und das entsprechende erste Kind abrufen und dessen Wert abrufen.

Wenn 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

Der folgende Code hat den Trick für mich.

$('.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(); 
}); 

Stellen Sie sicher, es nach dem Code hinzuzufügen, der den Kalender instanziiert und, sollte es AS IS funktionieren, wenn die Eigenschaft Standardansicht des JQuery Kalender ‚AgendaWeekly‘ ist.

Cheers, M

Answer 3

Ich weiß, dies nicht wirklich eine Antwort, sondern ein Kommentar zu einer früheren Antwort, aber ich habe noch den Ruf auf Antworten auf einen Kommentar zu erreichen.

W.R.T zur Antwort von @ user4243287 ein zusätzlicher Schritt war, diese Logik in die Option 'viewRender' zu bringen, wenn ich meinen Kalender initialisiere, um sicherzustellen, dass dies auch zwischen Wochen funktioniert.