jQuery DatePickerイベントが存在するセルの背景色（ロード時）

Question

イベントが存在するセルの背景色を変更したい。この日のためにこの場合

：2016年4月7日

私はここにSOで解決策が見つからない、誰かが私を助けることができると思います。 はあなた

JSコードをありがとう：

// I WANT TO CHANGE BACKGROUND-COLOR FOR THIS DAY 
var events = {"2016-04-07":[{"title":"Friday!!!!","description":"Weekend is starting!!!"}]}; 

// Setup our datepicker 
    $("#datepicker").datepicker({ 
    dateFormat: "yy-mm-dd", 
    onSelect: findEvents 
    }); 

// Provide a function to find and display events 
    function findEvents (date) { 
// Start by emptying our data container 
    $("#dateevents").empty(); 
// Potential date object 
    var dateObj = events[date]; 
// If no events exist for the selected date 
if (!dateObj) { 
    return $("#dateevents").html("<h2>" + date + ": No Events</h2>"); 
    } 
    // If we've made it this far, we have events! 
$("#dateevents").html("<h2>" + date + ": " + dateObj.length + " Events Planned</h2>"); 
// Cycle over every event for this date 
$.each(dateObj, function (index, event) { 
// Build a list for each event 
var $list = $("<ul>"); 
// Add all event details to list 
$.each(event, function (name, desc) { 
    $("<li>").html(name + ": " + desc).appendTo($list); 
}); 
// Place list in container 
$list.appendTo("#dateevents"); 
}); 
} 

フィドル：http://jsfiddle.net/qSCek/6/

Answer 1

は、あなたが機能でそれを入れて、月の変更などでそれを呼びたいかもしれませんが、このような何かを試してみてくださいHTMLをループ

// Provide some event data in JSON format 
var events = {"2016-04-07":[{"title":"Friday!!!!","description":"Weekend is starting!!!"}]}; 

// Setup our datepicker 
$("#datepicker").datepicker({ 
    dateFormat: "yy-mm-dd", 
    onSelect: findEvents, 
}); 


$("td[data-handler='selectDay']").each(function(index,value){ 
    var month = $(value).attr("data-month"); 
    var year = $(value).attr("data-year"); 
    var day = $(value).next().text(); 

    var date = year+"-"+(parseInt(month) + 1)+"-"+day 


    $.each(events, function(i, v) { 
    var parts = i.split("-") 
    parts[1] = parts[1].replace("0","") 
    parts[2] = parts[2].replace("0","") 
    var i = parts[0]+"-"+parts[1]+"-"+parts[2] 
    if (i == date) { 
     console.log("hit") 
     console.log(date) 
     $(value).next().css("background","red") 
    } 
    }); 
}) 
// Provide a function to find and display events 
function findEvents (date) { 
    // Start by emptying our data container 
    $("#dateevents").empty(); 
    // Potential date object 
    var dateObj = events[date]; 
    // If no events exist for the selected date 
    if (!dateObj) { 
    return $("#dateevents").html("<h2>" + date + ": No Events</h2>"); 
    }  
    // If we've made it this far, we have events! 
    $("#dateevents").html("<h2>" + date + ": " + dateObj.length + " Events Planned</h2>"); 
    // Cycle over every event for this date 
    $.each(dateObj, function (index, event) { 
    // Build a list for each event 
    var $list = $("<ul>"); 
    // Add all event details to list 
    $.each(event, function (name, desc) { 
     $("<li>").html(name + ": " + desc).appendTo($list); 
    }); 
    // Place list in container 
    $list.appendTo("#dateevents"); 
    }); 
} 

フィドルhttp://jsfiddle.net/qSCek/7/

Answer 2

ここに私は何をするために達成したものです。私が思う問題は、ビューがレンダリングされる前にonChangeMonthYearコールバックが呼び出されるということです。だから私は問題を解決するためにタイムアウトをかけます。

// Setup our datepicker 
$("#datepicker").datepicker({ 
    dateFormat: "yy-mm-dd", 
    onSelect: findEvents, 
    onChangeMonthYear: function(year, month) { 
    setTimeout(changeBackground, 1, year, month) 
    }  
}); 

var d = new Date(); 
changeBackground(d.getFullYear(), d.getMonth() + 1); 

function changeBackground(year, month) { 
    for (var date in events) { 
    var d = new Date(date); 
    // if same day and year 
    if (d.getFullYear() === year && d.getMonth() + 1 === month) { 
     var day = d.getDate(); 
     // retrieve all elements containing day 
     var elements = $('a:contains(' + day + ')'); 
     elements.each(function(index) { 
     if ($(this).text() == day) { 
      $(this).css("background", "red"); 
     } 
     }); 
    }; 
    } 
} 

そしてhere is the fiddle