FullCalendarのホバーでのセルの表示時間

Question

私はfullcalendar.ioの小さな機能を実装しようとしています。

weekViewまたはdayViewで指定したセルにカーソルを合わせると、何時に表示されるかをカレンダーに表示する必要があります。ここで

$('#calendar').find('.fc-slats').find('[class="fc-widget-content"]').hover(
function() { 
    var tr = $(this).parent(); 
    var time = tr.find('td.fc-axis.fc-time.fc-widget-content').find("span").text(); 
    $(this).append('<td class="temp_cell" style="border: 0px; width:5px;">'+time+'</td>'); 
},   
function() {       
    $(this).children('.temp_cell').remove(); 
}); 

は私のコードで出荷されています：jsfiddle.net/przemekp/w71rd9yz/

誰でも表示する方法を知ることができる今、私はカレンダーはviewRender方法でこのコードを使用して私にこの時間を示しているだけで、全体の行の際にポイントを取得するために 指定された日の1週間あたりのセルで

Answer 1

私もこの機能を利用する方法を探していました。 多くの試行錯誤のコーディングの後、私のテクニックは次のとおりです。

まず、私のfullcalendarオブジェクトの名前は "semaine"です。ただ、この定義の後 $('#semaine').fullCalendar({ ... select: function(ehDeb, ehFin, jsEvent, vue) { eraseAllCellTime($('#semaine')); .... }, eventMouseover: function(event, jsEvent, view) { eraseAllCellTime($('#semaine')); },
.... });

：私はここに（すべての曜日が表示付き）

「議題」ビューを使用しています（私はフランス人だ...） は私fullcalendarオブジェクトの定義であります

$('#semaine').find('.fc-slats').find('[class="fc-widget-content"]').mouseover(
    function(mouseEvent) { 
     displayCellTime($('#semaine'), this, mouseEvent); 
    } 
); 
$('#semaine').find('.fc-slats').find('[class="fc-widget-content"]').mouseenter(
    function(mouseEvent) { 
     displayCellTime($('#semaine'), this, mouseEvent); 
    } 
); 
$('#semaine').mouseleave(
    function() { 
     eraseAllCellTime($('#semaine')); 
    } 
); 

を、今の二つの機能は：：、私は、これら三つのコールバック関数をオーバーライドしまし

function eraseAllCellTime(calendar) { 
    calendar.find('.fc-slats').find('[class="fc-widget-content"]').each(function() { 
     $(this).empty(); 
    }); 
} 

function displayCellTime(calendar, tdAllDays, mouseEvent) { 
    // We remove all td cell contents 
    eraseAllCellTime(calendar); 
    // and we display the good cell 
    var tr = $(tdAllDays).parent(); 
    var time = tr.find('td.fc-axis.fc-time.fc-widget-content').find("span").text(); 
    var dayColumns = calendar.find('th.fc-day-header'); 
    var html = '<table class="dailycolumncutting">'; 
    html += '<tr>'; 
    var mouseX = mouseEvent.clientX; 
    var mouseY = mouseEvent.clientY; 
    for(var d = 0; d < dayColumns.size(); d++) { 
     var day = $(dayColumns[d]); 
     var offset = day.offset(); 
     var width = day.width(); 
     if (mouseX >= offset.left && mouseX <= offset.left+width) { 
      html += '<td class="hovered">' + day.data("date") + '<br />' + time + '</td>';        
     } else { 
      html += '<td>&nbsp;</td>'; 
     } 
    } 
    html += '</tr>'; 
    html += '</table>'; 
    $(tdAllDays).empty(); 
    $(tdAllDays).append(html); 
} 

あなたはきっとそれを向上させることができますが、それはあなたの必要性のための基礎を与えることができます

.dailycolumncutting td { 
    width: 100%; 
} 
.dailycolumncutting td.hovered { 
    text-align: center; 
    background-color: #ff000055; 
}  

...