Tengo un daterangepicker de bootstrap en el cual me gustaría hacer una serie de condiciones para que según las fechas que hay en la base de datos se bloqueen y cambien de color. Mi problema es que no sé muy bien cómo decirle al DateRangePicker que me coja las fechas del array que recibo del php sin que desaparezca de la web y quede un recuadro blanco.
EDITO: mi json que recibo en la vista, no lo interpreta correctamente el datepicker
Mi daterangepicker es este:
<script>
// Aqui recibimos el json de PHP
var daysData = <?= $data) ?>;
$( function() {
$( 'input[name="datefilter"]').daterangepicker({
isInvalidDate: function(date) {
var year = date.year();
var month = date.month() + 1;
var day = date.date();
var valid = false; // default css class
if(typeof daysData[year] != 'undefined'){
if(typeof daysData[year][month] != 'undefined'){
if(typeof daysData[year][month][day] != 'undefined'){
console.log(year, month, day, daysData[year][month][day]);
dayData = daysData[year][month][day];
//if (dayData['news'] == true){
valid = true;
//}
}
}
}
return valid;
},
isCustomDate: function(date) {
var year = date.year();
var month = date.month() + 1;
var day = date.date();
var daySettings = 'day_green'; // default css class
if(typeof daysData[year] != 'undefined'){
if(typeof daysData[year][month] != 'undefined'){
if(typeof daysData[year][month][day] != 'undefined'){
console.log(year, month, day, daysData[year][month][day]);
dayData = daysData[year][month][day];
//if (dayData['news'] == true){
daySettings = 'day_red';
//}
}
}
}
return daySettings;
},
});
</script>
La variable $data que recibo de php tiene el siguiente json ( ya lo transforme en el controlador)
[{
"area_id": null,
"title": "Comida",
"start": "2018-08-13 00:00:00"
}, {
"area_id": null,
"title": "Conferencia",
"start": "2018-08-19 00:00:00"
}, {
"area_id": null,
"title": "Meeting",
"start": "2018-08-27 00:00:00"
}, {
"area_id": null,
"title": "Cumplea\u00f1os",
"start": "2018-08-05 00:00:00"
}, {
"area_id": null,
"title": "Fecha disponible",
"start": "2018-08-14 00:00:00"
}, {
"area_id": null,
"title": "Fechas No Disponibles",
"start": "2018-07-30 00:00:00"
}, {
"area_id": null,
"title": "Consultar Fecha",
"start": "2018-08-06 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}, {
"area_id": 1,
"title": "vacacion",
"start": "2018-08-17 00:00:00"
}]
¿Cómo puedo utilizar este json para tener todas las fechas que vengan de bd como que están ocupadas, y marcarlas con otro color en el DateRangePicker? Estaba pensando en quitarle datos al array en php y pasarle solo la fecha, pero quiero conservar el area_id para hacer unas condiciones y que ponga distintos colores.
Gracias de antemano.