Jason Jason - 1 year ago 99
jQuery Question

dayRender not properly working in fullcalendar on given dates

I am using fullcalendar for day event booking.I want to make some day color change based on given dates.But it render the color in the whole calendar.It makes all the cell green.
Here is the code,

dayRender: function (date, cell) {
var disabledDates = ["2017-08-17","2017-08-23"];
if ($.inArray(date.format("YYYY-MM-DD"),disabledDates)) {
//alert("success");
cell.css("background-color", "green");
}
}

Answer Source

You are not using $.inArray correctly. It does not return true or false, which you would use to resolve an if statement. Instead it returns an integer representing the index at which it first finds a matching value. If it doesn't find a match, it returns -1.

Your problem is occurring because JavaScript treats 0 as loosely equal to false (i.e. 0 == false, but 0 !== false), and all other numbers loosely as equal to true. Therefore if $.inArray returns anything other than 0 (i.e. 0 is returned where matched the value in the first array index), your if statement will treat is as if it had returned true, and consequently change the background colour. That's why it changes it for all of them except 2017-08-17.

This version will work correctly, testing that the index return is > -1 (an integer, not a bool) before setting the background colour:

dayRender: function(date, cell) {
  var disabledDates = ["2017-08-17", "2017-08-23"];
  if ($.inArray(date.format("YYYY-MM-DD"), disabledDates) > -1) {
    console.log(date.format("YYYY-MM-DD"));
    cell.css("background-color", "green");
  }
}

See https://api.jquery.com/jQuery.inArray/ for a more detailed explanation.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download