ハイライト特定の日

Question

私は（私は私の好みに合わせて設計することができますAJAXフィードによって得られた）特定の日を強調表示してから、このような日にイベントをクリックしキャプチャできるようにしたい：

私が持っていましたevents handlerを見てください。しかし、個々のイベントを表示するようにはっきりと設計されています。私が望むことをするために調整できるかどうかはわかりません。当時のクラス名を追加してCSSでスタイルを設定する方法を理解できますか？

私はFullCalendar v2.3.2を使用しています（アップグレードは、サイト全体で既に使用されているため、実際にはオプションではありません）。

Answer 1

私はajax呼び出しを行うように変更しました。基本的には、ajax呼び出しなどをしてから1秒間待ってから再レンダリングします。

唯一いいことは、どうやってリフレッシュしたか、より良い方法があるかもしれないということです。 renderメソッドはビューを再レンダリングしません。

次に、ajaxから取得したデータから他の処理を行うように変更できます。

var dtoday = moment().dayOfYear(); 
 
var days = []; 
 

 
function pretendAjax() { 
 
    setTimeout(function() { 
 
    days = [dtoday - 2, dtoday + 2]; 
 
    //force calendar refresh, there might be a better 
 
    //way than below, but will do for now 
 
    $('#calendar').fullCalendar('changeView','basicWeek'); 
 
    $('#calendar').fullCalendar('changeView','month'); 
 
    }, 1000); 
 
} 
 

 

 
$('#calendar').fullCalendar({ 
 
    dayRender: function (date, cell) { 
 
    var dofyear = date.dayOfYear(); 
 
    if (days.indexOf(dofyear) >= 0) { 
 
     cell.css({backgroundColor: 'pink'}); 
 
    } 
 
    }, 
 
}); 
 

 
pretendAjax();

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script> 
 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css' /> 
 

 

 
<div id='calendar'></div>

Answer 2

私はほとんどFullCalendarのAPIの私の深い無知を明らかにし、それでも例えば（最適化の多くを必要とする概念上の証明であり、この醜いハックを構成しました、私たちは、参照を削除する必要がありますもはや存在しない細胞へ）。

私は最初のdayRenderの実行を悪用して、セルをカスタム変数に格納しています。私はその変数にアクセスして好みのjQuery関数を適切な古いjQueryオブジェクトであるリンクされたセルに適用することができます。脇の最適化

var days = {}; 
 
$('#calendar').fullCalendar({ 
 
    dayRender: function (date, cell) { 
 
     days[date.toISOString()] = cell; 
 
    }, 
 
    events: function(start, end, timezone, callback){ 
 
     // Emulated AJAX response 
 
     var data = [ 
 
      start.add(1, "days").format("YYYY-MM-DD"), 
 
      start.add(2, "days").format("YYYY-MM-DD"), 
 
      start.add(5, "days").format("YYYY-MM-DD") 
 
     ]; 
 
     $.map(data, function(elementOfArray){ 
 
      days[elementOfArray].addClass("has-stuff"); 
 
      callback([]); 
 
     }); 
 
    } 
 
});

.has-stuff { 
 
    background-color: yellow !important; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script> 
 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css' /> 
 

 

 
<div id='calendar'></div>

、それが強調された日にクリックイベントを実装する必要がありますに追加の作業が土台。

クレジットは、最初のスニペットスケルトンのためにキースに行きますが、エラーはすべて私のものです。