私は仕事に就きたいプロジェクトに悩まされています。私はいくつかの日の背景色を変更する必要があります。ユーザーが見なければならないカレンダーで、利用可能な日と利用できない日があります。私は、 "data-date"という属性があることを知りましたが、それを使用する可能性はありませんでした。Fullcalendar：特定の日の色を変更してください
特定の日の背景を操作する方法はありますか？
私は方法がなければならないと思う、現在の日付を示すセルには別の色もあります。
month,およびbasicDayの場合、dayRender機能を使用すると、日のレンダリングを変更できます。例：
$("#calendar").fullCalendar({
dayRender: function (date, cell) {
cell.css("background-color", "red");
}
});
dayRenderのドキュメントここにあります：http://arshaw.com/fullcalendar/docs/display/dayRender/
そして、ここではjsfiddleの作業例です：http://jsfiddle.net/kvakulo/CYnJY/4/
外部ライブラリを操作するとき、あなたは何を利用しないように試してみてくださいライブラリによって生成されたものです。次のバージョンでは、ライブラリが内部的に動作する方法を変更すると、ライブラリは引き続き後方互換性がありますが、コードは機能しなくなります。だから、ハッキングをするのではなく、ライブラリAPIを可能な限り使用してみてください。
あなたの質問に答えるには、利用できないすべての日に新しい予定を追加する方法があります。これは、イベントオブジェクトを作成し、renderEvent（.fullCalendar（ 'renderEvent'、event [、stick]））を実行することで実行できます。イベントオブジェクトを作成する際に背景色を必要な色として割り当て、背景を表示したくない場合は、色、テキストの色、境界の色を背景と同じに設定します。
編集： Regin Larsenの答えはよかったようです。私はその文書に気付かなかった。
jQuery fullcalendarを1日前に赤色（または他のいずれか）の色にすると、これがコードになります。
var $calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultView: 'month',
dayRender: function (date, cell) {
var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd');
var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
if (check < today) {
cell.css("background-color", "red");
}
}
});
Regin Larsen codeこれを実現するのに役立ちます。 Regin Larsenに感謝します。
なぜ "data-date"属性を使用しないのですか？単に、過去の日付の色を変更し、あなたのCSSで.fc-pastをターゲットとbackground-colorプロパティを追加するお探しの方に
$("#calendar").fullCalendar(function() {
viewRender: function() {
$("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red");
},
....
これは私を助けた。 'dayRender'メソッドがdayThreeViewで正しく動作しないためです –
dayRender: function(date, cell){
if (moment().diff(date,'days') > 0){
cell.css("background-color","silver");
}
},
。例えば,:特定の日の日付パラメータを使用して比較するため
.fc-past {
background-color: silver;
}
：
$("#calendar").fullCalendar({
dayRender: function (date, cell) {
if (date.isSame('2016-08-04')) {
cell.css("background-color","red");
}
}
});
isSameがfullcalendarで使用されているmoment.js、から来ている： http://momentjs.com/docs/#/query/is-same/
は、以下の私の答えを参照してください。おそらくより速くなるだろうCSSベースのソリューションのために：http://stackoverflow.com/a/36927481/270302 –