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

jQuery DatePicker background color for cells where event exists (on load)

本文关键字：加载 背景色 DatePicker 事件 单元格 jQuery 存在      更新时间：2024-04-03

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

在这种情况下，当天：2016-04-07

我希望有人能帮助我，我在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");
 });
 }

Fiddle：http://jsfiddle.net/qSCek/6/

试试这样的方法，在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/

以下是我完成的任务。我认为问题是在呈现视图之前调用了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");
        }
      });
    };
  }
}

这是小提琴

相关文章：