私は、思っていたよりも少し難しいことが判明したクライアントへのソリューションを作成するのに忙しかった. jQuery Datepicker ウィジェットを使用して、サーバー側のコードからカレンダー イベント (月別ビュー) を表示しています。次のコードのすべては、CSS を除いて機能します。それは何も変わっていません、そして私は世界のすべてを試したようです.
カレンダーはページ読み込み (MVC) の月ビューで表示され、ユーザーにイベントがある場合は、その日の背景色が異なる必要があります。また、ユーザーが月ごとに変わると、同じロジックが発生します (サーバーへの ajax 呼び出し)。繰り返しますが、これはすべてうまく機能しています。背景色を変更するという私の指示は変更されません。
<script type="text/javascript">
$(document).ready(function () {
$.expr[":"].exactly = function (el, i, m) {
var s = m[3];
if (!s) return false;
return eval("/^" + s + "$/i").test($(el).text());
};
var currentYear = (new Date).getFullYear();
var currentMonth = (new Date).getMonth();
function getTheData(year, month) {
var theYear = year;
var theMonth = month;
//alert(theYear + ", " + theMonth);
$.post("GetMeSomeData", { year: theYear, month: theMonth }, function(data) {
//cycle through the dates and address the CSS appropriately
var i = 0;
for (i = 0; i < data.length; i++) {
$('.ui-datepicker-calendar td a:exactly(' + data[i]['d'] + ')')
.css({ backgroundColor: 'blue' });
}
});
}
$('#date').datepicker({
inline: true,
beforeShowDay: getTheData(currentYear, currentMonth),
onSelect: function (dateText, inst) {
Date.prototype.toString = function () { return isNaN(this) ? 'NaN' : [this.getDate(), this.getMonth(), this.getFullYear()].join('/'); };
d = new Date(dateText);
//alert(d.getDate() + ", " + d.getFullYear());
getTheData(d.getFullYear(), d.getDate());
},
onChangeMonthYear: function (year, month, inst) {
//alert(year + ", " + month);
getTheData(year, month);
}
});
});
</script>