Fullcalendar-イベントの選択に基づいて1日を強調表示
フルカレンダーでは、eventClick関数/コールバックをトリガーするイベントを選択できます。私がやりたいのは、イベントがクリックされたときにイベントの日を強調表示することです（月表示）。
たとえば、イベントが10月30日にあり、イベントを選択した場合、その日の背景色を強調表示します。これは、fullcalendarが今日を黄色がかった色で強調表示する「今日」を処理する方法と非常によく似ています。
Fc-eventクラスまたはイベントオブジェクト自体をカレンダーの実際の日divに関連付ける方法がわからないようです。私の10月30日のイベントは、次のdiv（10月30日のボックス）内に表示されます。
<div class="fc-Sun fc-widget-content fc-day35 fc-first">
イベントオブジェクトに基づいてこのdivを（強調表示できるように）見つけるにはどうすればよいですか？
申し訳ありませんが、これは大まかな解決策です。このコンピューターでは開発ツールをセットアップしていないため、ほとんどがメモリからのものです。
うまくいけば、これはあなたが探しているものです！
//create fullCalendar:
$("#calendar").fullCalendar({
/* options */
eventClick: function(event, jsEvent){
//use the passed-in javascript event to get a jQuery-wrapped reference
//to the DOM element we clicked on.
//i can never remember if this is .target, .currentTarget, or .originalTarget
//... jquery has spoiled me
var $clickedEvent = $(jsEvent.target);
//tell the "selectionManager" to find the day this event belongs to,
//and add the "selected" css class to it
selectionManager.select($clickedEvent);
}
});
//define an object that handles the adding-removing of the 'selectedDay' css class
var selectionManager = (function(){
//i like making private variables :-)
var $curSelectedDay = null
//define a "select" method for switching 'selected' state
return {
select: function($newEvent) {
if ($curSelectedDay){
//if we already had a day chosen, let's get rid of its CSS 'selectedDay' class
$curSelectedDay.removeClass("selectedDay");
}
//find the parent div that has a class matching the pattern 'fc-day', and add the "selectedDay" class to it
$curSelectedDay = $thisEvent.closest('div[class~="fc-day"]').addClass("selectedDay");
}
};
})();
フルカレンダーで select method を使用するだけです。
例えば：
$('#calendar').fullCalendar('select', date);
dateはevent.startから来ています：
eventClick: function( event, jsEvent, view ) {
//pass event.start to select method
}
これが私のために働いた少し簡単な解決策です：
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(jsEvent.currentTarget).addClass("fc-state-highlight");
...これは、次のようにクリックハンドラーの内部に入ります。
$('#eventCalendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view) {
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(jsEvent.currentTarget).addClass("fc-state-highlight");
}
});
これは、dayClickハンドラーの代わりにeventClickハンドラーを使用していることに注意してください。 eventClickでも機能しない理由はわかりませんが、まだテストしていません。
編集：
eventClickハンドラーに同等のアプローチを使用することは、私が思っていたよりも複雑であることがわかりました。問題は、DOM階層の観点から、「日」の包含td要素と次のように表示されるイベントの包含div要素の間に親子関係がないことです。その日に発生します。
そのため、特定の日付の正しいtd要素を検索する関数を作成する必要がありました。私は次のようなものになりました：
function findContainerForDate(date) {
var firstDayFound = false;
var lastDayFound = false;
var calDate = $('#eventCalendar').fullCalendar('getDate');
var allDates = $('td[class*="fc-day"]')
for (var index = 0; index < allDates.length; index++) {
var container = allDates[index];
var month = calDate.getMonth();
var dayNumber = $(container).find(".fc-day-number").html();
if (dayNumber == 1 && ! firstDayFound) {
firstDayFound = true;
}
else if (dayNumber == 1) {
lastDayFound = true;
}
if (! firstDayFound) {
month--;
}
if (lastDayFound) {
month++;
}
if (month == date.getMonth() && dayNumber == date.getDate()) {
return container;
}
}
}
...そして、次のようにeventClickを実装できます。
eventClick: function(calEvent, jsEvent, view) {
var selectedContainer = findContainerForDate(calEvent.start);
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(selectedContainer).addClass("fc-state-highlight");
}
eventRender: function (event, element, view) {
// like that
var dateString = $.fullCalendar.formatDate(event.start, 'yyyy-MM-dd');
view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FAA732');
// or that
var cell = view.dateToCell(event.start);
view.element.find('tr:eq(' + (cell.row + 1) + ') td:eq(' + cell.col + ')').css('background-color', '#FAA732');
}
より良い解決策はありますか？
これが役立つかどうかはわかりませんが、kayz1のソリューションと同様に、これは非常にうまく機能することがわかりました...
$("[data-date='" + $.datepicker.formatDate('yy-mm-dd', new Date(calEvent.start)) + "']").addClass("fc-state-highlight");
ArothのFinder機能についての私の見解
// based on the given event date return the full calendar day jquery object (<td ...>)
// matching day and month
//
// assumptions:
// - the event date is if for the same year as the current viewable month
// - the fc-day* TD's are in chronological order
// - the fc-day* TD's not for the current month have a class of fc-other-month
//
findFullCalendarDayForClickedEvent : function( eventDate ) {
var foundDay;
var $theCalendar = $( '#myCalendar' );
var currentDate = $theCalendar.fullCalendar( 'getDate' );
var fullCalendarDayContainers = $theCalendar.find( 'td[class*="fc-day"]' );
for( var i = 0; i < fullCalendarDayContainers.length; i++ ) {
var $currentContainer = $( fullCalendarDayContainers[ i ] );
var dayNumber = $currentContainer.find( '.fc-day-number' ).html();
// first find the matching day
if ( eventDate.getDate() == dayNumber ) {
// now month check, if our current container has fc-other-month
// then the event month and the current month needs to mismatch,
// otherwise container is missing fc-other-month then the event
// month and current month need to match
if( $currentContainer.hasClass( 'fc-other-month' ) ) {
if( eventDate.getMonth() != currentDate.getMonth() ) {
foundDay = $currentContainer;
break;
}
}
else {
if ( eventDate.getMonth() == currentDate.getMonth() ) {
foundDay = $currentContainer;
break;
}
}
}
}
return foundDay;
}
非常に多くの答え。少しの調査で、より明確なコードが得られます：fullcalendar v2.1.1
onDayClick = function( date, jsEvent, view ){
var cell = view.dateToCell(date);
var el = view.dayGrid.getCellDayEl(cell);
var $clickedEvent = $(el);
$clickedEvent.addClass("SelectedDay");
};
Fullcalendarselectメソッドの存在に対するFitz Agardの回答のおかげで、これは複数日のイベントでも機能するバージョンです。
基本的には、マウスのクリック座標が含まれる日を見つけようとし、その日付をフルカレンダーselectメソッドに渡します。
function findClickedDay(e) {
var days = $('#calendar .fc-day');
for(var i = 0 ; i < days.length ; i++) {
var day = $(days[i]);
var mouseX = e.pageX;
var mouseY = e.pageY;
var offset = day.offset();
var width = day.width();
var height = day.height();
if ( mouseX > offset.left && mouseX < offset.left+width
&& mouseY > offset.top && mouseY < offset.top+height )
return day;
}
}
function myDayClick(date) { ... } // Optional
$('#calendar').fullCalendar({
dayClick: function(date) { myDayClick(date); }, // Optional
eventClick: function(event, jsEvent, view) {
clickedDay = findClickedDay(jsEvent);
var date = new Date(clickedDay.data('date'));
$('#calendar').fullCalendar('select', date);
myDayClick(date); // Optional
}
});
編集：
FullCalendarselectメソッドがdayClickコールバックをトリガーしないことに気づきました。したがって、dayClickコールバックを設定した場合は、それを関数（ここではmyDayClickと呼ばれます）でラップし、eventClickコールバック。 dayClickコールバックがない場合は、オプションの部分を削除できます。