How to compare dates in full calendar

Question

I have a dates stored in my database which I would like to compare with the elements of the calendar to change the background color of the days

{
  "success": true,
  "disponibilidad": [
    {
      "slot_date": "2017-06-08"
    },
    {
      "slot_date": "2017-06-09"
    },
    {
      "slot_date": "2017-06-10"
    },
    {
      "slot_date": "2017-06-11"
    },
    {
      "slot_date": "2017-06-12"
    }
  ]
}

I tried to use jquery, and it works in a certain way, but the load time is too slow and too little optimum, in addition, if I change the month, a problem arises to color the days, my question is, is there a way to pass that array Of dates within dayRender?

the method that I had used

$('#calendar').fullCalendar({

    dayClick: function() {

        //alert("dia presionado");
        selectedDate = $(this).attr("data-date");

        alert($(this).attr("data-date"));
        //window.location.href="/reservation/"+selectedDate;
        $('#calendar').fullCalendar('gotoDate', $(this).attr("data-date"));
    },

    dayRender: function(date, cell) {
        $.ajax({
            type: "get",
            url: '/getFaq',
            dataType: 'json',
            success: function(data) {
                var valores = [];
                valores[0] = "2017-06-27";
                valores[1] = "2017-06-28";
                for (var i = 0; i <= 1; i++) {
                    if (date.format() == valores[i]) {
                        cell.css("background-color", "red");
                    }
                }
            },
            error: function(response) {},
        });
}})

*Edit

I have embed the code using data properties, however, for some reason I can not use the variable within the dayrender, in the dayclick if it works

success: function(data)
        {
        myArray= new Array(data.disponibilidad.length);
        for(var i=0;i<data.disponibilidad.length;i++)
        {

            myArray[i]=data.disponibilidad[i].slot_date;
        }

        $( "body" ).data( "array",myArray);
        //for(var k=0; k< myArray.length;k++)
        //console.log($( "body" ).data( "array" )); 
        //console.log(myArray);


        }



$('#calendar_make_a_reservation').fullCalendar({
                height: 500,
                dayClick: function() {
                    $('#modal_appointment_time').modal('open');
                    /*
                    var array=$( "body" ).data( "array" );
         console.log(array);*/
                },
                dayRender: function (date, cell) {
                                var array=$( "body" ).data( "array" );
                                console.log(array);
            /*
            myArray.forEach(function (item) {
                if (date._d.getDate() == item.getDate() && date._d.getMonth() == item.getMonth()) 
                {
                    $(cell).toggleClass('selected');
                }
            });*/}

            })

In dayrender returns me "undefined"

Answer 1

I was able to solve it, the problem with dayrender was due to synchronization, once the async is changed to false, everything works perfectly.

$.ajax({
        async:false,   
        cache:false, 
        dataType: 'json',
        type: 'get',  
        url: 'getReservas',
        data:params,
        success: function(data)
        {
        myArray= new Array(data.disponibilidad.length);
        for(var i=0;i<data.disponibilidad.length;i++)
        {

            myArray[i]=data.disponibilidad[i].slot_date;
        }
        alert("segundo");
        var array=$( "body" ).data("array",myArray);
        //for(var k=0; k< myArray.length;k++)
        //console.log($( "body" ).data( "array" )); 
        //console.log(myArray);


        },

        error: function(data){
           alert("ha ocurrido un error") ;

        }
    });





$('#calendar_make_a_reservation').fullCalendar({
                height: 500,
                dayClick: function() {
                $('#modal_appointment_time').modal('open');
                 //console.log($( "body" ).data("array"));
                },
                dayRender: function (date, cell) {

               myArray.forEach(function (item) {



    if (date.format()==item) 
    {
        cell.css("background-color", "blue");
    }
       });

      }

      })

Answer 2

date is a moment.js date object. You can compare adding parameters to the format method like:

date.format("YYYY-MM-DD") == valores[i]