Javascript 存在事件的单元格的jQuery DatePicker背景色（加载时）

我想更改存在事件的单元格的背景色

在这种情况下，该日期：2016-04-07

我希望有人能帮我，我在这里找不到解决办法。 多谢各位

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");
 });
 }

//我想更改今天的背景色
var事件={“2016-04-07”：[{“标题”：“星期五！！！！”，“描述”：“周末开始！！！”}]；
//设置日期选择器
$（“#日期选择器”）。日期选择器（{
日期格式：“年月日”，
onSelect:findEvents
});
//提供查找和显示事件的功能
函数findEvents（日期）{
//首先清空数据容器
$（“#日期事件”）.empty（）；
//潜在日期对象
var dateObj=事件[日期]；
//如果所选日期不存在任何事件
如果（！dateObj）{
return$（“#dateevents”）.html（“+date+”：无事件”）；
}
//如果我们能做到这一点，我们就有活动！
$（“#dateevents”）.html（“+date+”：“+dateObj.length+”计划的事件”）；
//循环此日期的每个事件
$.each（日期对象、函数（索引、事件）{
//为每个事件建立一个列表
var$list=$（“
”）；
//将所有事件详细信息添加到列表中
$.each（事件、函数（名称、描述）{
$（“
”）.html（名称+”：“+desc）.appendTo（$list）；
});
//将列表放入容器中
$list.appendTo（“#dateevents”）；
});
}

---

Fiddle:

尝试类似的方法，在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");
  });
}

//以JSON格式提供一些事件数据
var事件={“2016-04-07”：[{“标题”：“星期五！！！！”，“描述”：“周末开始！！！”}]；
//设置日期选择器
$（“#日期选择器”）。日期选择器（{
日期格式：“年月日”，
onSelect:findEvents，
});
$（“td[data handler='selectDay']）。每个（函数（索引、值）{
变量月=$（值）.attr（“数据月”）；
变量年=$（值）.attr（“数据年”）；
var day=$（值）.next（）.text（）；
风险值日期=年+“-”+（帕塞因特（月）+1）+“-”+天
$。每个（事件、函数（i、v）{
var parts=i.split（“-”）
零件[1]=零件[1]。替换（“0”，“0”）
零件[2]=零件[2]。替换（“0”，“0”）
变量i=部分[0]+“-”+部分[1]+“-”+部分[2]
如果（i==日期）{
控制台日志（“命中”）
console.log（日期）
$（value）.next（）.css（“背景”，“红色”）
}
});
})
//提供查找和显示事件的功能
函数findEvents（日期）{
//首先清空数据容器
$（“#日期事件”）.empty（）；
//潜在日期对象
var dateObj=事件[日期]；
//如果所选日期不存在任何事件
如果（！dateObj）{
return$（“#dateevents”）.html（“+date+”：无事件”）；
}    
//如果我们能做到这一点，我们就有活动！
$（“#dateevents”）.html（“+date+”：“+dateObj.length+”计划的事件”）；
//循环此日期的每个事件
$.each（日期对象、函数（索引、事件）{
//为每个事件建立一个列表
var$list=$（“
”）；
//将所有事件详细信息添加到列表中
$.each（事件、函数（名称、描述）{
$（“
”）.html（名称+”：“+desc）.appendTo（$list）；
});
//将列表放入容器中
$list.appendTo（“#dateevents”）；
});
}

---

小提琴

以下是我完成的工作。我认为问题是在呈现视图之前调用了

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");
        }
      });
    };
  }
}

---

和

可能重复的@TyrantsBeard不是onSelect，而是在加载datepicker时，如果它在当天单击后保持css，则编辑将是完美的。不过非常感谢！！！问题是，当您更改月份时，css不会保留在项目上。我在日期选择器上尝试了

onChangeMonthYear

选项，但它不起作用either@Lulylulu对谢谢，如果我点击了另一天背景消失了，你能帮我吗？请试一试您可以在

onSelect

回调函数

findEvents

中添加对

changeBackground

的调用。我用这个例子更新了小提琴。